<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>CSS Painting API Level 1</title>
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <meta content="ED" name="w3c-status">
  <link href="../default.css" rel="stylesheet" type="text/css">
  <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon">
  <link href="https://www.w3.org/StyleSheets/TR/2016/W3C-ED" rel="stylesheet" type="text/css">
  <link href="http://www.w3.org/TR/css-paint-api-1/" rel="canonical">
<style>
/* Put nice boxes around each algorithm. */
[data-algorithm]:not(.heading) {
    padding: .5em;
    border: thin solid #ddd; border-radius: .5em;
    margin: .5em calc(-0.5em - 1px);
}
[data-algorithm]:not(.heading) > :first-child {
    margin-top: 0;
}
[data-algorithm]:not(.heading) > :last-child {
    margin-bottom: 0;
}
</style>
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-var-click-highlighting */

    var { cursor: pointer; }
    var.selected0 { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
    var.selected1 { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
    var.selected2 { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
    var.selected3 { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
    var.selected4 { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
    var.selected5 { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
    var.selected6 { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
    </style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-syntax-highlighting */
pre.idl.highlight { color: #708090; }
.highlight:not(.idl) { background: hsl(24, 20%, 95%); }
code.highlight { padding: .1em; border-radius: .3em; }
pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }
c-[a] { color: #990055 } /* Keyword.Declaration */
c-[b] { color: #990055 } /* Keyword.Type */
c-[c] { color: #708090 } /* Comment */
c-[d] { color: #708090 } /* Comment.Multiline */
c-[e] { color: #0077aa } /* Name.Attribute */
c-[f] { color: #669900 } /* Name.Tag */
c-[g] { color: #222222 } /* Name.Variable */
c-[k] { color: #990055 } /* Keyword */
c-[l] { color: #000000 } /* Literal */
c-[m] { color: #000000 } /* Literal.Number */
c-[n] { color: #0077aa } /* Name */
c-[o] { color: #999999 } /* Operator */
c-[p] { color: #999999 } /* Punctuation */
c-[s] { color: #a67f59 } /* Literal.String */
c-[t] { color: #a67f59 } /* Literal.String.Single */
c-[u] { color: #a67f59 } /* Literal.String.Double */
c-[cp] { color: #708090 } /* Comment.Preproc */
c-[c1] { color: #708090 } /* Comment.Single */
c-[cs] { color: #708090 } /* Comment.Special */
c-[kc] { color: #990055 } /* Keyword.Constant */
c-[kn] { color: #990055 } /* Keyword.Namespace */
c-[kp] { color: #990055 } /* Keyword.Pseudo */
c-[kr] { color: #990055 } /* Keyword.Reserved */
c-[ld] { color: #000000 } /* Literal.Date */
c-[nc] { color: #0077aa } /* Name.Class */
c-[no] { color: #0077aa } /* Name.Constant */
c-[nd] { color: #0077aa } /* Name.Decorator */
c-[ni] { color: #0077aa } /* Name.Entity */
c-[ne] { color: #0077aa } /* Name.Exception */
c-[nf] { color: #0077aa } /* Name.Function */
c-[nl] { color: #0077aa } /* Name.Label */
c-[nn] { color: #0077aa } /* Name.Namespace */
c-[py] { color: #0077aa } /* Name.Property */
c-[ow] { color: #999999 } /* Operator.Word */
c-[mb] { color: #000000 } /* Literal.Number.Bin */
c-[mf] { color: #000000 } /* Literal.Number.Float */
c-[mh] { color: #000000 } /* Literal.Number.Hex */
c-[mi] { color: #000000 } /* Literal.Number.Integer */
c-[mo] { color: #000000 } /* Literal.Number.Oct */
c-[sb] { color: #a67f59 } /* Literal.String.Backtick */
c-[sc] { color: #a67f59 } /* Literal.String.Char */
c-[sd] { color: #a67f59 } /* Literal.String.Doc */
c-[se] { color: #a67f59 } /* Literal.String.Escape */
c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */
c-[si] { color: #a67f59 } /* Literal.String.Interpol */
c-[sx] { color: #a67f59 } /* Literal.String.Other */
c-[sr] { color: #a67f59 } /* Literal.String.Regex */
c-[ss] { color: #a67f59 } /* Literal.String.Symbol */
c-[vc] { color: #0077aa } /* Name.Variable.Class */
c-[vg] { color: #0077aa } /* Name.Variable.Global */
c-[vi] { color: #0077aa } /* Name.Variable.Instance */
c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"><a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" width="72"> </a> </p>
   <h1 class="p-name no-ref" id="title">CSS Painting API Level 1</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <div data-fill-with="spec-metadata">
    <dl>
     <dt>This version:
     <dd><a class="u-url" href="https://drafts.css-houdini.org/css-paint-api-1/">https://drafts.css-houdini.org/css-paint-api-1/</a>
     <dt>Latest published version:
     <dd><a href="http://www.w3.org/TR/css-paint-api-1/">http://www.w3.org/TR/css-paint-api-1/</a>
     <dt>Previous Versions:
     <dd><a href="https://www.w3.org/TR/2018/WD-css-paint-api-1-20180410/" rel="prev">https://www.w3.org/TR/2018/WD-css-paint-api-1-20180410/</a>
     <dd><a href="https://www.w3.org/TR/2016/WD-css-paint-api-1-20160607/" rel="prev">https://www.w3.org/TR/2016/WD-css-paint-api-1-20160607/</a>
     <dt>Feedback:
     <dd><span><a href="mailto:public-houdini@w3.org?subject=%5Bcss-paint-api%5D%20YOUR%20TOPIC%20HERE">public-houdini@w3.org</a> with subject line “<kbd>[css-paint-api] <i data-lt>… message topic …</i></kbd>” (<a href="http://lists.w3.org/Archives/Public/public-houdini/" rel="discussion">archives</a>)</span>
     <dt class="editor">Editors:
     <dd class="editor p-author h-card vcard" data-editor-id="73001"><a class="p-name fn u-email email" href="mailto:ikilpatrick@chromium.org">Ian Kilpatrick</a>
     <dd class="editor p-author h-card vcard" data-editor-id="42080"><a class="p-name fn u-email email" href="mailto:dino@apple.com">Dean Jackson</a>
     <dt class="editor">Former Editor:
     <dd class="editor p-author h-card vcard" data-editor-id="47691"><a class="p-name fn u-email email" href="mailto:shanestephens@google.com">Shane Stephens</a>
     <dt>Issue Tracking:
     <dd><a href="https://github.com/w3c/css-houdini-drafts/labels/css-paint-api-1">GitHub Issues</a>
    </dl>
   </div>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 1970 <a href="https://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="https://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="https://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="https://www.keio.ac.jp/">Keio</a>, <a href="https://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/copyright-documents">document use</a> rules apply. </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>An API for allowing web developers to define a custom CSS <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-images-3/#typedef-image" id="ref-for-typedef-image">&lt;image></a> with javascript, which will

    respond to style and size changes.
    See <a href="https://github.com/w3c/css-houdini-drafts/blob/master/css-paint-api/EXPLAINER.md">EXPLAINER</a>.</p>
  </div>
  <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
  <div data-fill-with="status">
   <p> This is a public copy of the editors’ draft.
	It is provided for discussion only and may change at any moment.
	Its publication here does not imply endorsement of its contents by W3C.
	Don’t cite this document other than as work in progress. </p>
   <p> <a href="https://github.com/w3c/css-houdini-drafts/issues">GitHub Issues</a> are preferred for discussion of this specification.
	When filing an issue, please put the text “css-paint-api” in the title,
	preferably like this:
	“[css-paint-api] <i>…summary of comment…</i>”.
	All issues and comments are <a href="https://lists.w3.org/Archives/Public/public-houdini-archive/">archived</a>. </p>
   <p> This document was produced by the <a href="http://www.w3.org/Style/CSS/members">CSS Working Group</a>. </p>
   <p> This document was produced by a group operating under
	the <a href="http://www.w3.org/Consortium/Patent-Policy/">W3C Patent Policy</a>.
	W3C maintains a <a href="http://www.w3.org/2004/01/pp-impl/32061/status" rel="disclosure">public list of any patent disclosures</a> made in connection with the deliverables of the group;
	that page also includes instructions for disclosing a patent.
	An individual who has actual knowledge of a patent which the individual believes contains <a href="http://www.w3.org/Consortium/Patent-Policy/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="http://www.w3.org/Consortium/Patent-Policy/#sec-Disclosure">section 6 of the W3C Patent Policy</a>. </p>
   <p> This document is governed by the <a href="https://www.w3.org/2019/Process-20190301/" id="w3c_process_revision">1 March 2019 W3C Process Document</a>. </p>
   <p></p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li><a href="#intro"><span class="secno">1</span> <span class="content">Introduction</span></a>
    <li><a href="#paint-worklet"><span class="secno">2</span> <span class="content">Paint Worklet</span></a>
    <li><a href="#concepts"><span class="secno">3</span> <span class="content">Concepts</span></a>
    <li><a href="#registering-custom-paint"><span class="secno">4</span> <span class="content">Registering Custom Paint</span></a>
    <li><a href="#paint-notation"><span class="secno">5</span> <span class="content">Paint Notation</span></a>
    <li>
     <a href="#2d-rendering-context"><span class="secno">6</span> <span class="content">The 2D rendering context</span></a>
     <ol class="toc">
      <li><a href="#drawing-a-cssimagevalue"><span class="secno">6.1</span> <span class="content">Drawing a CSSImageValue</span></a>
     </ol>
    <li>
     <a href="#drawing-an-image"><span class="secno">7</span> <span class="content">Drawing an image</span></a>
     <ol class="toc">
      <li><a href="#global-scope-selection"><span class="secno">7.1</span> <span class="content">Global Scope Selection</span></a>
     </ol>
    <li>
     <a href="#examples"><span class="secno">8</span> <span class="content">Examples</span></a>
     <ol class="toc">
      <li><a href="#example-1"><span class="secno">8.1</span> <span class="content">Example 1: Colored Circle</span></a>
      <li><a href="#example-2"><span class="secno">8.2</span> <span class="content">Example 2: Image Placeholder</span></a>
      <li><a href="#example-3"><span class="secno">8.3</span> <span class="content">Example 3: Arcs</span></a>
      <li><a href="#example-4"><span class="secno">8.4</span> <span class="content">Example 4: Different Colors (based on size)</span></a>
      <li><a href="#example-5"><span class="secno">8.5</span> <span class="content">Example 5: Drawing outside an element’s area</span></a>
     </ol>
    <li><a href="#security-considerations"><span class="secno">9</span> <span class="content">Security Considerations</span></a>
    <li><a href="#privacy-considerations"><span class="secno">10</span> <span class="content">Privacy Considerations</span></a>
    <li><a href="#changes"><span class="secno">11</span> <span class="content">Changes</span></a>
    <li>
     <a href="#conformance"><span class="secno"></span> <span class="content"> Conformance</span></a>
     <ol class="toc">
      <li><a href="#conventions"><span class="secno"></span> <span class="content"> Document conventions</span></a>
      <li><a href="#conformance-classes"><span class="secno"></span> <span class="content"> Conformance classes</span></a>
      <li>
       <a href="#partial"><span class="secno"></span> <span class="content"> Partial implementations</span></a>
       <ol class="toc">
        <li><a href="#conform-future-proofing"><span class="secno"></span> <span class="content"> Implementations of Unstable and Proprietary Features</span></a>
       </ol>
      <li><a href="#testing"><span class="secno"></span> <span class="content"> Non-experimental implementations</span></a>
     </ol>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
     </ol>
    <li><a href="#idl-index"><span class="secno"></span> <span class="content">IDL Index</span></a>
   </ol>
  </nav>
  <main>
   <h2 class="heading settled" data-level="1" id="intro"><span class="secno">1. </span><span class="content">Introduction</span><a class="self-link" href="#intro"></a></h2>
   <p>The paint stage of CSS is responsible for painting the background, content and highlight of a
box based on that box’s size (as generated by the layout stage) and computed style.</p>
   <p>This specification describes an API which allows developers to paint a part of a box in
response to size / computed style changes with an additional <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-images-3/#typedef-image" id="ref-for-typedef-image①">&lt;image></a> function.</p>
   <p class="note" role="note"><span>Note:</span> In a future version of the spec, support could be added for defining the clip, global alpha,
    filter on a portion of a box (for example on the background layers).</p>
   <h2 class="heading settled" data-level="2" id="paint-worklet"><span class="secno">2. </span><span class="content">Paint Worklet</span><a class="self-link" href="#paint-worklet"></a></h2>
   <p>The <code class="idl"><a data-link-type="idl" href="#dom-css-paintworklet" id="ref-for-dom-css-paintworklet">paintWorklet</a></code> attribute allows access to the <code class="idl"><a data-link-type="idl" href="https://drafts.css-houdini.org/worklets/#worklet" id="ref-for-worklet">Worklet</a></code> responsible for all the classes
which are related to painting.</p>
   <p>The <code class="idl"><a data-link-type="idl" href="#dom-css-paintworklet" id="ref-for-dom-css-paintworklet①">paintWorklet</a></code>'s <a data-link-type="dfn" href="https://drafts.css-houdini.org/worklets/#worklet-global-scope-type" id="ref-for-worklet-global-scope-type">worklet global scope type</a> is <code class="idl"><a data-link-type="idl" href="#paintworkletglobalscope" id="ref-for-paintworkletglobalscope">PaintWorkletGlobalScope</a></code>.</p>
<pre class="idl highlight def"><c- b>partial</c-> <c- b>namespace</c-> <a class="idl-code" data-link-type="namespace" href="https://drafts.csswg.org/cssom-1/#namespacedef-css" id="ref-for-namespacedef-css"><c- g>CSS</c-></a> {
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SameObject" id="ref-for-SameObject"><c- g>SameObject</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://drafts.css-houdini.org/worklets/#worklet" id="ref-for-worklet①"><c- n>Worklet</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="CSS" data-dfn-type="attribute" data-export data-readonly data-type="Worklet" id="dom-css-paintworklet"><code><c- g>paintWorklet</c-></code></dfn>;
};
</pre>
   <p>A <code class="idl"><a data-link-type="idl" href="#paintworkletglobalscope" id="ref-for-paintworkletglobalscope①">PaintWorkletGlobalScope</a></code> is a global execution context of the <code class="idl"><a data-link-type="idl" href="#dom-css-paintworklet" id="ref-for-dom-css-paintworklet②">paintWorklet</a></code>.</p>
   <p>A <code class="idl"><a data-link-type="idl" href="#paintworkletglobalscope" id="ref-for-paintworkletglobalscope②">PaintWorkletGlobalScope</a></code> has a <code class="idl"><a data-link-type="idl" href="#dom-paintworkletglobalscope-devicepixelratio" id="ref-for-dom-paintworkletglobalscope-devicepixelratio">devicePixelRatio</a></code> property which is
identical to the Window.<code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/cssom-view-1/#dom-window-devicepixelratio" id="ref-for-dom-window-devicepixelratio">devicePixelRatio</a></code> property.</p>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Global" id="ref-for-Global"><c- g>Global</c-></a>=(<a class="n" data-link-type="idl-name" href="https://drafts.css-houdini.org/worklets/#worklet" id="ref-for-worklet②"><c- n>Worklet</c-></a>,<a class="n" data-link-type="idl-name"><c- n>PaintWorklet</c-></a>),<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed"><c- g>Exposed</c-></a>=<c- n>PaintWorklet</c->]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="paintworkletglobalscope"><code><c- g>PaintWorkletGlobalScope</c-></code></dfn> : <a class="n" data-link-type="idl-name" href="https://drafts.css-houdini.org/worklets/#workletglobalscope" id="ref-for-workletglobalscope"><c- n>WorkletGlobalScope</c-></a> {
    <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-paintworkletglobalscope-registerpaint" id="ref-for-dom-paintworkletglobalscope-registerpaint"><c- g>registerPaint</c-></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString"><c- b>DOMString</c-></a> <dfn class="idl-code" data-dfn-for="PaintWorkletGlobalScope/registerPaint(name, paintCtor)" data-dfn-type="argument" data-export id="dom-paintworkletglobalscope-registerpaint-name-paintctor-name"><code><c- g>name</c-></code><a class="self-link" href="#dom-paintworkletglobalscope-registerpaint-name-paintctor-name"></a></dfn>, <a class="n" data-link-type="idl-name" href="https://heycam.github.io/webidl/#VoidFunction" id="ref-for-VoidFunction"><c- n>VoidFunction</c-></a> <dfn class="idl-code" data-dfn-for="PaintWorkletGlobalScope/registerPaint(name, paintCtor)" data-dfn-type="argument" data-export id="dom-paintworkletglobalscope-registerpaint-name-paintctor-paintctor"><code><c- g>paintCtor</c-></code><a class="self-link" href="#dom-paintworkletglobalscope-registerpaint-name-paintctor-paintctor"></a></dfn>);
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="PaintWorkletGlobalScope" data-dfn-type="attribute" data-export data-readonly data-type="unrestricted double" id="dom-paintworkletglobalscope-devicepixelratio"><code><c- g>devicePixelRatio</c-></code></dfn>;
};
</pre>
   <p>The <code class="idl"><a data-link-type="idl" href="#dictdef-paintrenderingcontext2dsettings" id="ref-for-dictdef-paintrenderingcontext2dsettings">PaintRenderingContext2DSettings</a></code> contains the settings for the rendering context associated
with the paint canvas. The <code class="idl"><a data-link-type="idl" href="#dictdef-paintrenderingcontext2dsettings" id="ref-for-dictdef-paintrenderingcontext2dsettings①">PaintRenderingContext2DSettings</a></code> provides a supported subset of canvas
rendering context 2D settings. In the future, it may be extended to support color management in
paint canvas.</p>
<pre class="idl highlight def"><c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-paintrenderingcontext2dsettings"><code><c- g>PaintRenderingContext2DSettings</c-></code></dfn> {
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean"><c- b>boolean</c-></a> <dfn class="dfn-paneled idl-code" data-default="true" data-dfn-for="PaintRenderingContext2DSettings" data-dfn-type="dict-member" data-export data-type="boolean " id="dom-paintrenderingcontext2dsettings-alpha"><code><c- g>alpha</c-></code></dfn> = <c- b>true</c->;
};
</pre>
   <div class="note" role="note">
     Note: The shape of the class should be: 
<pre class="lang-javascript highlight"><c- kr>class</c-> MyPaint <c- p>{</c->
    <c- kr>static</c-> get inputProperties<c- p>()</c-> <c- p>{</c-> <c- k>return</c-> <c- p>[</c-><c- t>'--foo'</c-><c- p>];</c-> <c- p>}</c->
    <c- kr>static</c-> get inputArguments<c- p>()</c-> <c- p>{</c-> <c- k>return</c-> <c- p>[</c-><c- t>'&lt;color>'</c-><c- p>];</c-> <c- p>}</c->
    <c- kr>static</c-> get contextOptions<c- p>()</c-> <c- p>{</c-> <c- k>return</c-> <c- p>{</c->alpha<c- o>:</c-> <c- kc>true</c-><c- p>};</c-> <c- p>}</c->

    paint<c- p>(</c->ctx<c- p>,</c-> size<c- p>,</c-> styleMap<c- p>)</c-> <c- p>{</c->
        <c- c1>// Paint code goes here.</c->
    <c- p>}</c->
<c- p>}</c->
</pre>
   </div>
   <h2 class="heading settled" data-level="3" id="concepts"><span class="secno">3. </span><span class="content">Concepts</span><a class="self-link" href="#concepts"></a></h2>
   <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="paint-definition">paint definition</dfn> is a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#struct" id="ref-for-struct">struct</a> which describes the information needed by the <code class="idl"><a data-link-type="idl" href="#paintworkletglobalscope" id="ref-for-paintworkletglobalscope③">PaintWorkletGlobalScope</a></code> about the author defined <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-images-3/#typedef-image" id="ref-for-typedef-image②">&lt;image></a> (which can be referenced by the <a class="production css" data-link-type="function" href="#funcdef-paint" id="ref-for-funcdef-paint">&lt;paint()></a> function). It consists of:</p>
   <ul>
    <li data-md>
     <p><dfn class="dfn-paneled" data-dfn-for="paint definition" data-dfn-type="dfn" data-noexport id="paint-definition-class-constructor">class constructor</dfn> which is the class <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-constructor" id="ref-for-sec-constructor">constructor</a>.</p>
    <li data-md>
     <p><dfn class="dfn-paneled" data-dfn-for="paint definition" data-dfn-type="dfn" data-noexport id="paint-definition-paint-function">paint function</dfn> which is the paint <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#function" id="ref-for-function">Function</a> <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-callback-function" id="ref-for-dfn-callback-function">callback function</a> type.</p>
    <li data-md>
     <p><dfn class="dfn-paneled" data-dfn-for="paint definition" data-dfn-type="dfn" data-noexport id="paint-definition-constructor-valid-flag">constructor valid flag</dfn>.</p>
    <li data-md>
     <p><dfn class="dfn-paneled" data-dfn-for="paint definition" data-dfn-type="dfn" data-noexport id="paint-definition-input-properties">input properties</dfn> which is a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list" id="ref-for-list">list</a> of <code>DOMStrings</code>.</p>
    <li data-md>
     <p>A <dfn class="dfn-paneled" data-dfn-for="paint definition" data-dfn-type="dfn" data-noexport id="paint-definition-paintrenderingcontext2dsettings-object">PaintRenderingContext2DSettings object</dfn>.</p>
   </ul>
   <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="document-paint-definition">document paint definition</dfn> is a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#struct" id="ref-for-struct①">struct</a> which describes the information
needed by the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document" id="ref-for-concept-document">document</a> about the author defined <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-images-3/#typedef-image" id="ref-for-typedef-image③">&lt;image></a> function (which can be referenced
by the paint function). It consists of:</p>
   <ul>
    <li data-md>
     <p>A <dfn class="dfn-paneled" data-dfn-for="document paint definition" data-dfn-type="dfn" data-noexport id="document-paint-definition-input-properties">input properties</dfn> which is a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list" id="ref-for-list①">list</a> of <code>DOMStrings</code>.</p>
    <li data-md>
     <p>A <dfn class="dfn-paneled" data-dfn-for="document paint definition" data-dfn-type="dfn" data-noexport id="document-paint-definition-input-argument-syntaxes">input argument syntaxes</dfn> which is a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list" id="ref-for-list②">list</a> of <a data-link-type="dfn">syntax definitions</a>.</p>
    <li data-md>
     <p>A <dfn class="dfn-paneled" data-dfn-for="document paint definition" data-dfn-type="dfn" data-noexport id="document-paint-definition-paintrenderingcontext2dsettings-object">PaintRenderingContext2DSettings object</dfn>.</p>
   </ul>
   <h2 class="heading settled" data-level="4" id="registering-custom-paint"><span class="secno">4. </span><span class="content">Registering Custom Paint</span><a class="self-link" href="#registering-custom-paint"></a></h2>
   <p>The <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document" id="ref-for-concept-document①">document</a> has a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#ordered-map" id="ref-for-ordered-map">map</a> of <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="document-paint-definitions">document paint definitions</dfn>. Initially
this map is empty; it is populated when <code class="idl"><a data-link-type="idl" href="#dom-paintworkletglobalscope-registerpaint" id="ref-for-dom-paintworkletglobalscope-registerpaint①">registerPaint(name, paintCtor)</a></code> is called.</p>
   <p>A <code class="idl"><a data-link-type="idl" href="#paintworkletglobalscope" id="ref-for-paintworkletglobalscope④">PaintWorkletGlobalScope</a></code> has a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#ordered-map" id="ref-for-ordered-map①">map</a> of <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="paint-definitions">paint definitions</dfn>. Initially this map
is empty; it is populated when <code class="idl"><a data-link-type="idl" href="#dom-paintworkletglobalscope-registerpaint" id="ref-for-dom-paintworkletglobalscope-registerpaint②">registerPaint(name, paintCtor)</a></code> is called.</p>
   <p>A <code class="idl"><a data-link-type="idl" href="#paintworkletglobalscope" id="ref-for-paintworkletglobalscope⑤">PaintWorkletGlobalScope</a></code> has a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#ordered-map" id="ref-for-ordered-map②">map</a> of <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="paint-class-instances">paint class instances</dfn>. Initially this
map is empty; it is populated when <a data-link-type="dfn" href="#draw-a-paint-image" id="ref-for-draw-a-paint-image">draw a paint image</a> is invoked by the user agent.</p>
   <p>Instances of paint classes in the <a data-link-type="dfn" href="#paint-class-instances" id="ref-for-paint-class-instances">paint class instances</a> map may be disposed and removed from
the map by the user agent at any time. This may be done when a <a class="production css" data-link-type="function" href="#funcdef-paint" id="ref-for-funcdef-paint①">&lt;paint()></a> function no longer is
used, or the user agent needs to reclaim memory.</p>
   <div class="algorithm" data-algorithm="registerPaint(name, paintCtor)">
     When the <dfn class="dfn-paneled idl-code" data-dfn-for="PaintWorkletGlobalScope" data-dfn-type="method" data-export id="dom-paintworkletglobalscope-registerpaint"><code>registerPaint(<var>name</var>, <var>paintCtor</var>)</code></dfn> method is
called, the user agent <em>must</em> run the following steps: 
    <ol>
     <li data-md>
      <p>If the <var>name</var> is an empty string, <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw">throw</a> a <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-native-error-types-used-in-this-standard-typeerror" id="ref-for-sec-native-error-types-used-in-this-standard-typeerror">TypeError</a> and abort all these steps.</p>
     <li data-md>
      <p>Let <var>paintDefinitionMap</var> be <code class="idl"><a data-link-type="idl" href="#paintworkletglobalscope" id="ref-for-paintworkletglobalscope⑥">PaintWorkletGlobalScope</a></code>'s <a data-link-type="dfn" href="#paint-definitions" id="ref-for-paint-definitions">paint definitions</a> map.</p>
     <li data-md>
      <p>If <var>paintDefinitionMap</var>[<var>name</var>] <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#map-exists" id="ref-for-map-exists">exists</a> <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw①">throw</a> a
"<code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#invalidmodificationerror" id="ref-for-invalidmodificationerror">InvalidModificationError</a></code>" <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException">DOMException</a></code> and abort all these steps.</p>
     <li data-md>
      <p>Let <var>inputProperties</var> be an empty <code>sequence&lt;DOMString></code>.</p>
     <li data-md>
      <p>Let <var>inputPropertiesIterable</var> be the result of <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-get-o-p" id="ref-for-sec-get-o-p">Get</a>(<var>paintCtor</var>, "inputProperties").</p>
     <li data-md>
      <p>If <var>inputPropertiesIterable</var> is not undefined, then set <var>inputProperties</var> to the result of <a data-link-type="dfn" href="https://heycam.github.io/webidl/#web-idl-arguments-list-converting" id="ref-for-web-idl-arguments-list-converting">converting</a> <var>inputPropertiesIterable</var> to a <code>sequence&lt;DOMString></code>. If an
exception is <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw②">thrown</a>, rethrow the exception and abort all these steps.</p>
     <li data-md>
      <p>Filter <var>inputProperties</var> so that it only contains <a data-link-type="dfn" href="https://drafts.csswg.org/cssom-1/#supported-css-property" id="ref-for-supported-css-property">supported CSS properties</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-variables-1/#custom-property" id="ref-for-custom-property">custom properties</a>.</p>
    </ol>
    <p class="note" role="note"><span>Note:</span> The list of CSS properties provided by the input properties getter can either be custom or
        native CSS properties.</p>
    <p class="note" role="note"><span>Note:</span> The list of CSS properties may contain shorthands.</p>
    <p class="note" role="note"><span>Note:</span> In order for a paint image class to be forwards compatible, the list of CSS properties can
        also contains currently invalid properties for the user agent. For example <code>margin-bikeshed-property</code>.</p>
    <ol start="8">
     <li data-md>
      <p>Let <var>inputArguments</var> be an empty <code>sequence&lt;DOMString></code>.</p>
     <li data-md>
      <p>Let <var>inputArgumentsIterable</var> be the result of <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-get-o-p" id="ref-for-sec-get-o-p①">Get</a>(<var>paintCtor</var>, "inputArguments").</p>
     <li data-md>
      <p>If <var>inputArgumentsIterable</var> is not undefined, then set <var>inputArguments</var> to the result of <a data-link-type="dfn" href="https://heycam.github.io/webidl/#web-idl-arguments-list-converting" id="ref-for-web-idl-arguments-list-converting①">converting</a> <var>inputArgumentsIterable</var> to a <code>sequence&lt;DOMString></code>. If an
exception is thrown, rethrow the exception and abort all these steps.</p>
     <li data-md>
      <p>Let <var>inputArgumentSyntaxes</var> be an <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list-empty" id="ref-for-list-empty">empty</a> <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list" id="ref-for-list③">list</a>.</p>
     <li data-md>
      <p><a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list-iterate" id="ref-for-list-iterate">For each</a> <var>item</var> in <var>inputArguments</var> perform the following substeps:</p>
      <ol>
       <li data-md>
        <p>Attempt to <a data-link-type="dfn">consume a syntax definition</a> from <var>item</var>.
If failure was returned, <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw③">throw</a> a <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-native-error-types-used-in-this-standard-typeerror" id="ref-for-sec-native-error-types-used-in-this-standard-typeerror①">TypeError</a> and abort all these steps.
Otherwise, let <var>parsedSyntax</var> be the returned <a data-link-type="dfn">syntax definition</a>.</p>
       <li data-md>
        <p><a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list-append" id="ref-for-list-append">Append</a> <var>parsedSyntax</var> to <var>inputArgumentSyntaxes</var>.</p>
      </ol>
     <li data-md>
      <p>Let <var>contextOptionsValue</var> be the result of <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-get-o-p" id="ref-for-sec-get-o-p②">Get</a>(<var>paintCtor</var>, "contextOptions").</p>
     <li data-md>
      <p>Let <var>paintRenderingContext2DSettings</var> be the result of <a data-link-type="dfn" href="https://heycam.github.io/webidl/#web-idl-arguments-list-converting" id="ref-for-web-idl-arguments-list-converting②">converting</a> <var>contextOptionsValue</var> to a <code class="idl"><a data-link-type="idl" href="#dictdef-paintrenderingcontext2dsettings" id="ref-for-dictdef-paintrenderingcontext2dsettings②">PaintRenderingContext2DSettings</a></code>.
If an exception is <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw④">thrown</a>, rethrow the exception and abort all these steps.</p>
      <p class="note" role="note"><span>Note:</span> Setting <code>paintRenderingContext2DSettings.alpha</code> is <code>false</code> allows user agents
    to anti-alias text in addition to performing "visibility" optimizations, e.g. not
    painting an image behind the paint image as the paint image is opaque.</p>
     <li data-md>
      <p>If the result of <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-isconstructor" id="ref-for-sec-isconstructor">IsConstructor</a>(<var>paintCtor</var>) is false, <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw⑤">throw</a> a <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-native-error-types-used-in-this-standard-typeerror" id="ref-for-sec-native-error-types-used-in-this-standard-typeerror②">TypeError</a> and abort all these steps.</p>
     <li data-md>
      <p>Let <var>prototype</var> be the result of <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-get-o-p" id="ref-for-sec-get-o-p③">Get</a>(<var>paintCtor</var>, "prototype").</p>
     <li data-md>
      <p>If the result of <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-ecmascript-data-types-and-values" id="ref-for-sec-ecmascript-data-types-and-values">Type</a>(<var>prototype</var>) is not Object, <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw⑥">throw</a> a <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-native-error-types-used-in-this-standard-typeerror" id="ref-for-sec-native-error-types-used-in-this-standard-typeerror③">TypeError</a> and
abort all these steps.</p>
     <li data-md>
      <p>Let <var>paintValue</var> be the result of <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-get-o-p" id="ref-for-sec-get-o-p④">Get</a>(<var>prototype</var>, "paint").</p>
     <li data-md>
      <p>Let <var>paint</var> be the result of <a data-link-type="dfn" href="https://heycam.github.io/webidl/#web-idl-arguments-list-converting" id="ref-for-web-idl-arguments-list-converting③">converting</a> <var>paintValue</var> to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#function" id="ref-for-function①">Function</a> <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-callback-function" id="ref-for-dfn-callback-function①">callback function</a> type. Rethrow any exceptions from the conversion.</p>
     <li data-md>
      <p>Let <var>definition</var> be a new <a data-link-type="dfn" href="#paint-definition" id="ref-for-paint-definition">paint definition</a> with:</p>
      <ul>
       <li data-md>
        <p><a data-link-type="dfn" href="#paint-definition-class-constructor" id="ref-for-paint-definition-class-constructor">class constructor</a> being <var>paintCtor</var>.</p>
       <li data-md>
        <p><a data-link-type="dfn" href="#paint-definition-paint-function" id="ref-for-paint-definition-paint-function">paint function</a> being <var>paint</var>.</p>
       <li data-md>
        <p><a data-link-type="dfn" href="#paint-definition-constructor-valid-flag" id="ref-for-paint-definition-constructor-valid-flag">constructor valid flag</a> being <b>true</b>.</p>
       <li data-md>
        <p><a data-link-type="dfn" href="#paint-definition-input-properties" id="ref-for-paint-definition-input-properties">input properties</a> being <var>inputProperties</var>.</p>
       <li data-md>
        <p><a data-link-type="dfn" href="#paint-definition-paintrenderingcontext2dsettings-object" id="ref-for-paint-definition-paintrenderingcontext2dsettings-object">PaintRenderingContext2DSettings object</a> being <var>paintRenderingContext2DSettings</var>.</p>
      </ul>
     <li data-md>
      <p><a data-link-type="dfn" href="https://infra.spec.whatwg.org/#map-set" id="ref-for-map-set">Set</a> <var>paintDefinitionMap</var>[<var>name</var>] to <var>definition</var>.</p>
     <li data-md>
      <p><a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task" id="ref-for-queue-a-task">Queue a task</a> to run the following steps:</p>
      <ol>
       <li data-md>
        <p>Let <var>documentPaintDefinitionMap</var> be the associated <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document" id="ref-for-concept-document②">document’s</a> <a data-link-type="dfn" href="#document-paint-definitions" id="ref-for-document-paint-definitions">document paint
definitions</a> <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#ordered-map" id="ref-for-ordered-map③">map</a>.</p>
       <li data-md>
        <p>Let <var>documentDefinition</var> be a new <a data-link-type="dfn" href="#document-paint-definition" id="ref-for-document-paint-definition">document paint definition</a> with:</p>
        <ul>
         <li data-md>
          <p><a data-link-type="dfn" href="#document-paint-definition-input-properties" id="ref-for-document-paint-definition-input-properties">input properties</a> being <var>inputProperties</var>.</p>
         <li data-md>
          <p><a data-link-type="dfn" href="#document-paint-definition-input-argument-syntaxes" id="ref-for-document-paint-definition-input-argument-syntaxes">input argument syntaxes</a> being <var>inputArgumentSyntaxes</var>.</p>
         <li data-md>
          <p><a data-link-type="dfn" href="#document-paint-definition-paintrenderingcontext2dsettings-object" id="ref-for-document-paint-definition-paintrenderingcontext2dsettings-object">PaintRenderingContext2DSettings object</a> being <var>paintRenderingContext2DSettings</var>.</p>
        </ul>
       <li data-md>
        <p>If <var>documentPaintDefinitionMap</var>[<var>name</var>] <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#map-exists" id="ref-for-map-exists①">exists</a>, run the following steps:</p>
        <ol>
         <li data-md>
          <p>Let <var>existingDocumentDefinition</var> be the result of <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#map-get" id="ref-for-map-get">get</a> <var>documentPaintDefinitionMap</var>[<var>name</var>].</p>
         <li data-md>
          <p>If <var>existingDocumentDefinition</var> is <code>"invalid"</code>, abort all these steps.</p>
         <li data-md>
          <p>If <var>existingDocumentDefinition</var> and <var>documentDefinition</var> are not equivalent, (that is <a data-link-type="dfn" href="#document-paint-definition-input-properties" id="ref-for-document-paint-definition-input-properties①">input properties</a>, <a data-link-type="dfn" href="#document-paint-definition-input-argument-syntaxes" id="ref-for-document-paint-definition-input-argument-syntaxes①">input argument syntaxes</a>, and <a data-link-type="dfn" href="#document-paint-definition-paintrenderingcontext2dsettings-object" id="ref-for-document-paint-definition-paintrenderingcontext2dsettings-object①">PaintRenderingContext2DSettings object</a> are different), then:</p>
          <p><a data-link-type="dfn" href="https://infra.spec.whatwg.org/#map-set" id="ref-for-map-set①">Set</a> <var>documentPaintDefinitionMap</var>[<var>name</var>] to <code>"invalid"</code>.</p>
          <p>Log an error to the debugging console stating that the same class was registered
with different <code>inputProperties</code>, <code>inputArguments</code>, or <code>paintRenderingContext2DSettings</code>.</p>
        </ol>
       <li data-md>
        <p>Otherwise, <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#map-set" id="ref-for-map-set②">set</a> <var>documentPaintDefinitionMap</var>[<var>name</var>] to <var>documentDefinition</var>.</p>
      </ol>
    </ol>
    <p class="note" role="note"><span>Note:</span> The list of input properties should only be looked up once, the class doesn’t have the
    opportunity to dynamically change its input properties.</p>
    <p class="note" role="note"><span>Note:</span> In a future version of the spec, the author could have the ability to receive a different type
    of RenderingContext. In particular the author may want a WebGL rendering context to render 3D
    effects. There are complexities in setting up a WebGL rendering context to take the <code class="idl"><a data-link-type="idl" href="#paintsize" id="ref-for-paintsize">PaintSize</a></code> and <code class="idl"><a data-link-type="idl" href="https://drafts.css-houdini.org/css-typed-om-1/#stylepropertymap" id="ref-for-stylepropertymap">StylePropertyMap</a></code> as inputs.</p>
   </div>
   <h2 class="heading settled" data-level="5" id="paint-notation"><span class="secno">5. </span><span class="content">Paint Notation</span><a class="self-link" href="#paint-notation"></a></h2>
<pre class="prod"><dfn class="dfn-paneled" data-dfn-type="function" data-export id="funcdef-paint">paint()</dfn> = paint( <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-ident" id="ref-for-typedef-ident">&lt;ident></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-comma" id="ref-for-comb-comma">,</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-declaration-value" id="ref-for-typedef-declaration-value">&lt;declaration-value></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt">?</a> )
</pre>
   <p>The <a class="production css" data-link-type="function" href="#funcdef-paint" id="ref-for-funcdef-paint②">&lt;paint()></a> function is an additional notation to be supported by the <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-images-3/#typedef-image" id="ref-for-typedef-image④">&lt;image></a> type.</p>
   <div class="example" id="example-b92885ef">
    <a class="self-link" href="#example-b92885ef"></a> 
<pre class="lang-markup highlight"><c- p>&lt;</c-><c- f>style</c-><c- p>></c->
    <c- p>.</c-><c- nc>logo</c-> <c- p>{</c-> <c- k>background-image</c-><c- p>:</c-> <c- nf>paint</c-><c- p>(</c-><c- n>company</c-><c- o>-</c-><c- n>logo</c-><c- p>);</c-> <c- p>}</c->
    <c- p>.</c-><c- nc>chat-bubble</c-> <c- p>{</c-> <c- k>background-image</c-><c- p>:</c-> <c- nf>paint</c-><c- p>(</c-><c- n>chat</c-><c- o>-</c-><c- n>bubble</c-><c- p>,</c-> <c- kc>blue</c-><c- p>);</c-> <c- p>}</c->
<c- p>&lt;/</c-><c- f>style</c-><c- p>></c->
</pre>
   </div>
   <p>For the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-ui-4/#propdef-cursor" id="ref-for-propdef-cursor">cursor</a> property, the <a class="production css" data-link-type="function" href="#funcdef-paint" id="ref-for-funcdef-paint③">&lt;paint()></a> function should be treated as an <a data-link-type="dfn" href="https://drafts.csswg.org/css-images-4/#invalid-image" id="ref-for-invalid-image">invalid image</a> and
fallback to the next supported <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-images-3/#typedef-image" id="ref-for-typedef-image⑤">&lt;image></a>.</p>
   <p>At <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#computed-value" id="ref-for-computed-value">computed value</a> time the <a class="production css" data-link-type="function" href="#funcdef-paint" id="ref-for-funcdef-paint④">&lt;paint()></a> function does <em>not</em> need to match the grammar
registered by <code class="idl"><a data-link-type="idl" href="#dom-paintworkletglobalscope-registerpaint" id="ref-for-dom-paintworkletglobalscope-registerpaint③">registerPaint()</a></code>. Instead this will result in an <a data-link-type="dfn" href="https://drafts.csswg.org/css-images-4/#invalid-image" id="ref-for-invalid-image①">invalid image</a> when the
parsing occurs inside <a data-link-type="dfn" href="#draw-a-paint-image" id="ref-for-draw-a-paint-image①">draw a paint image</a>.</p>
   <h2 class="heading settled" data-level="6" id="2d-rendering-context"><span class="secno">6. </span><span class="content">The 2D rendering context</span><a class="self-link" href="#2d-rendering-context"></a></h2>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed①"><c- g>Exposed</c-></a>=<c- n>PaintWorklet</c->]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="paintrenderingcontext2d"><code><c- g>PaintRenderingContext2D</c-></code></dfn> {
};
<a class="n" data-link-type="idl-name" href="#paintrenderingcontext2d" id="ref-for-paintrenderingcontext2d"><c- n>PaintRenderingContext2D</c-></a> <c- b>includes</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/canvas.html#canvasstate" id="ref-for-canvasstate"><c- n>CanvasState</c-></a>;
<a class="n" data-link-type="idl-name" href="#paintrenderingcontext2d" id="ref-for-paintrenderingcontext2d①"><c- n>PaintRenderingContext2D</c-></a> <c- b>includes</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/canvas.html#canvastransform" id="ref-for-canvastransform"><c- n>CanvasTransform</c-></a>;
<a class="n" data-link-type="idl-name" href="#paintrenderingcontext2d" id="ref-for-paintrenderingcontext2d②"><c- n>PaintRenderingContext2D</c-></a> <c- b>includes</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/canvas.html#canvascompositing" id="ref-for-canvascompositing"><c- n>CanvasCompositing</c-></a>;
<a class="n" data-link-type="idl-name" href="#paintrenderingcontext2d" id="ref-for-paintrenderingcontext2d③"><c- n>PaintRenderingContext2D</c-></a> <c- b>includes</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/canvas.html#canvasimagesmoothing" id="ref-for-canvasimagesmoothing"><c- n>CanvasImageSmoothing</c-></a>;
<a class="n" data-link-type="idl-name" href="#paintrenderingcontext2d" id="ref-for-paintrenderingcontext2d④"><c- n>PaintRenderingContext2D</c-></a> <c- b>includes</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/canvas.html#canvasfillstrokestyles" id="ref-for-canvasfillstrokestyles"><c- n>CanvasFillStrokeStyles</c-></a>;
<a class="n" data-link-type="idl-name" href="#paintrenderingcontext2d" id="ref-for-paintrenderingcontext2d⑤"><c- n>PaintRenderingContext2D</c-></a> <c- b>includes</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/canvas.html#canvasshadowstyles" id="ref-for-canvasshadowstyles"><c- n>CanvasShadowStyles</c-></a>;
<a class="n" data-link-type="idl-name" href="#paintrenderingcontext2d" id="ref-for-paintrenderingcontext2d⑥"><c- n>PaintRenderingContext2D</c-></a> <c- b>includes</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/canvas.html#canvasrect" id="ref-for-canvasrect"><c- n>CanvasRect</c-></a>;
<a class="n" data-link-type="idl-name" href="#paintrenderingcontext2d" id="ref-for-paintrenderingcontext2d⑦"><c- n>PaintRenderingContext2D</c-></a> <c- b>includes</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/canvas.html#canvasdrawpath" id="ref-for-canvasdrawpath"><c- n>CanvasDrawPath</c-></a>;
<a class="n" data-link-type="idl-name" href="#paintrenderingcontext2d" id="ref-for-paintrenderingcontext2d⑧"><c- n>PaintRenderingContext2D</c-></a> <c- b>includes</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/canvas.html#canvasdrawimage" id="ref-for-canvasdrawimage"><c- n>CanvasDrawImage</c-></a>;
<a class="n" data-link-type="idl-name" href="#paintrenderingcontext2d" id="ref-for-paintrenderingcontext2d⑨"><c- n>PaintRenderingContext2D</c-></a> <c- b>includes</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/canvas.html#canvaspathdrawingstyles" id="ref-for-canvaspathdrawingstyles"><c- n>CanvasPathDrawingStyles</c-></a>;
<a class="n" data-link-type="idl-name" href="#paintrenderingcontext2d" id="ref-for-paintrenderingcontext2d①⓪"><c- n>PaintRenderingContext2D</c-></a> <c- b>includes</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/canvas.html#canvaspath" id="ref-for-canvaspath"><c- n>CanvasPath</c-></a>;
</pre>
   <p class="note" role="note"><span>Note:</span> The <code class="idl"><a data-link-type="idl" href="#paintrenderingcontext2d" id="ref-for-paintrenderingcontext2d①①">PaintRenderingContext2D</a></code> implements a subset of the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/canvas.html#canvasrenderingcontext2d" id="ref-for-canvasrenderingcontext2d">CanvasRenderingContext2D</a></code> API.
    Specifically it doesn’t implement the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/canvas.html#canvasimagedata" id="ref-for-canvasimagedata">CanvasImageData</a></code>, <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/canvas.html#canvasuserinterface" id="ref-for-canvasuserinterface">CanvasUserInterface</a></code>, <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/canvas.html#canvastext" id="ref-for-canvastext">CanvasText</a></code>, or <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/canvas.html#canvastextdrawingstyles" id="ref-for-canvastextdrawingstyles">CanvasTextDrawingStyles</a></code> APIs.</p>
   <p>A <code class="idl"><a data-link-type="idl" href="#paintrenderingcontext2d" id="ref-for-paintrenderingcontext2d①②">PaintRenderingContext2D</a></code> object has a <dfn class="dfn-paneled" data-dfn-for="PaintRenderingContext2D" data-dfn-type="dfn" data-noexport id="paintrenderingcontext2d-output-bitmap">output bitmap</dfn>.
This is initialised when the object is created.
The size of the <a data-link-type="dfn" href="#paintrenderingcontext2d-output-bitmap" id="ref-for-paintrenderingcontext2d-output-bitmap">output bitmap</a> is the <a data-link-type="dfn" href="https://drafts.csswg.org/css-images-3/#concrete-object-size" id="ref-for-concrete-object-size">concrete object size</a> of the object it is rendering to.</p>
   <p>A <code class="idl"><a data-link-type="idl" href="#paintrenderingcontext2d" id="ref-for-paintrenderingcontext2d①③">PaintRenderingContext2D</a></code> object also has an <dfn class="dfn-paneled" data-dfn-for="PaintRenderingContext2D" data-dfn-type="dfn" data-noexport id="paintrenderingcontext2d-alpha">alpha</dfn> flag,
which can be set to true or false.
Initially, when the context is created,
its alpha flag must be set to true.
When a <code class="idl"><a data-link-type="idl" href="#paintrenderingcontext2d" id="ref-for-paintrenderingcontext2d①④">PaintRenderingContext2D</a></code> object has its alpha flag set to false,
then its alpha channel must be fixed to 1.0 (fully opaque) for all pixels,
and attempts to change the alpha component of any pixel must be silently ignored.</p>
   <p>The size of the <a data-link-type="dfn" href="#paintrenderingcontext2d-output-bitmap" id="ref-for-paintrenderingcontext2d-output-bitmap①">output bitmap</a> does not necessarily represent the size of the actual bitmap
that the user agent will use internally or during rendering. For example, if the visual viewport is
zoomed the user agent may internally use bitmaps which correspond to the number of device pixels in
the coordinate space, so that the resulting rendering is of high quality.</p>
   <p>Additionally the user agent may record the sequence of drawing operations which have been applied to
the <a data-link-type="dfn" href="#paintrenderingcontext2d-output-bitmap" id="ref-for-paintrenderingcontext2d-output-bitmap②">output bitmap</a> such that the user agent can subsequently draw onto a device bitmap at the
correct resolution. This also allows user agents to re-use the same output of the <a data-link-type="dfn" href="#paintrenderingcontext2d-output-bitmap" id="ref-for-paintrenderingcontext2d-output-bitmap③">output bitmap</a> repeatably while the visual viewport is being zoomed for example.</p>
   <p>Whenever <code>"currentColor"</code> is used as a color in the <code class="idl"><a data-link-type="idl" href="#paintrenderingcontext2d" id="ref-for-paintrenderingcontext2d①⑤">PaintRenderingContext2D</a></code> API, it
is treated as opaque black.</p>
   <div class="example" id="example-191bbc01">
    <a class="self-link" href="#example-191bbc01"></a> The code below will produce a solid black rectange. 
<pre class="lang-javascript highlight">registerPaint<c- p>(</c-><c- t>'currentcolor'</c-><c- p>,</c-> <c- kr>class</c-> <c- p>{</c->
    paint<c- p>(</c->ctx<c- p>,</c-> size<c- p>)</c-> <c- p>{</c->
        ctx<c- p>.</c->fillStyle <c- o>=</c-> <c- t>'currentColor'</c-><c- p>;</c->
        ctx<c- p>.</c->fillRect<c- p>(</c-><c- mi>0</c-><c- p>,</c-> <c- mi>0</c-><c- p>,</c-> size<c- p>.</c->width<c- p>,</c-> size<c- p>.</c->height<c- p>);</c->
    <c- p>}</c->
<c- p>});</c->
</pre>
   </div>
   <div class="algorithm" data-algorithm="create a PaintRenderingContext2D object">
     When the user agent is to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="create-a-paintrenderingcontext2d-object">create a PaintRenderingContext2D object</dfn> for a given <var>width</var>, <var>height</var>, and <var>paintRenderingContext2DSettings</var>, it <em>must</em> run the following steps: 
    <ol>
     <li data-md>
      <p>Create a new <code class="idl"><a data-link-type="idl" href="#paintrenderingcontext2d" id="ref-for-paintrenderingcontext2d①⑥">PaintRenderingContext2D</a></code>.</p>
     <li data-md>
      <p><a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-set-bitmap-dimensions" id="ref-for-concept-canvas-set-bitmap-dimensions">Set bitmap dimensions</a> for the context’s <a data-link-type="dfn" href="#paintrenderingcontext2d-output-bitmap" id="ref-for-paintrenderingcontext2d-output-bitmap④">output bitmap</a> to the rounded values of <var>width</var> and <var>height</var>.</p>
     <li data-md>
      <p>Set the <code class="idl"><a data-link-type="idl" href="#paintrenderingcontext2d" id="ref-for-paintrenderingcontext2d①⑦">PaintRenderingContext2D</a></code>'s <a data-link-type="dfn" href="#paintrenderingcontext2d-alpha" id="ref-for-paintrenderingcontext2d-alpha">alpha</a> flag to <var>paintRenderingContext2DSettings</var>’s <code class="idl"><a data-link-type="idl" href="#dom-paintrenderingcontext2dsettings-alpha" id="ref-for-dom-paintrenderingcontext2dsettings-alpha">alpha</a></code>.</p>
     <li data-md>
      <p>Return the new <code class="idl"><a data-link-type="idl" href="#paintrenderingcontext2d" id="ref-for-paintrenderingcontext2d①⑧">PaintRenderingContext2D</a></code>.</p>
    </ol>
    <p class="note" role="note"><span>Note:</span> The initial state of the rendering context is set inside the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-set-bitmap-dimensions" id="ref-for-concept-canvas-set-bitmap-dimensions①">set bitmap dimensions</a> algorithm, as it invokes <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/canvas.html#reset-the-rendering-context-to-its-default-state" id="ref-for-reset-the-rendering-context-to-its-default-state">reset the rendering context to its default state</a> and clears the <a data-link-type="dfn" href="#paintrenderingcontext2d-output-bitmap" id="ref-for-paintrenderingcontext2d-output-bitmap⑤">output bitmap</a>.</p>
   </div>
   <h3 class="heading settled" data-level="6.1" id="drawing-a-cssimagevalue"><span class="secno">6.1. </span><span class="content">Drawing a CSSImageValue</span><a class="self-link" href="#drawing-a-cssimagevalue"></a></h3>
   <p>The <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/canvas.html#canvasimagesource" id="ref-for-canvasimagesource">CanvasImageSource</a></code> typedef is extended to also include the <code class="idl"><a data-link-type="idl" href="https://drafts.css-houdini.org/css-typed-om-1/#cssimagevalue" id="ref-for-cssimagevalue">CSSImageValue</a></code> type to be used
as an image source.</p>
   <p>For interfaces which use the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/canvas.html#canvasdrawimage" id="ref-for-canvasdrawimage①">CanvasDrawImage</a></code> mixin:</p>
   <ul>
    <li data-md>
     <p>When a <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/canvas.html#canvasimagesource" id="ref-for-canvasimagesource①">CanvasImageSource</a></code> object represents an <code class="idl"><a data-link-type="idl" href="https://drafts.css-houdini.org/css-typed-om-1/#cssimagevalue" id="ref-for-cssimagevalue①">CSSImageValue</a></code>, the result of invoking
 the value’s underlying image algorithm must be used as the source image for the purposes of <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-drawimage" id="ref-for-dom-context-2d-drawimage">drawImage</a></code>.</p>
   </ul>
   <p class="note" role="note"><span>Note:</span> This should eventually be moved to the canvas section of the HTML specification.
See <a href="https://github.com/w3c/css-houdini-drafts/issues/819">Issue 819</a>.</p>
   <h2 class="heading settled" data-level="7" id="drawing-an-image"><span class="secno">7. </span><span class="content">Drawing an image</span><a class="self-link" href="#drawing-an-image"></a></h2>
   <p>If a <a class="production css" data-link-type="function" href="#funcdef-paint" id="ref-for-funcdef-paint⑤">&lt;paint()></a> function image for a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#box" id="ref-for-box">box</a> is within the visual viewport, the user agent <em>must</em> display an image output from an invocation of the <a data-link-type="dfn" href="#draw-a-paint-image" id="ref-for-draw-a-paint-image②">draw a paint image</a> algorithm.</p>
   <p class="note" role="note"><span>Note:</span> The user agent doesn’t have to run <a data-link-type="dfn" href="#draw-a-paint-image" id="ref-for-draw-a-paint-image③">draw a paint image</a> each frame for a <a class="production css" data-link-type="function" href="#funcdef-paint" id="ref-for-funcdef-paint⑥">&lt;paint()></a> function within the visual viewport. It can cache results, (potentially using additional
    invalidation steps) to display the correct image output.</p>
   <p class="note" role="note"><span>Note:</span> The user agent can optionally defer drawing images which are outside the visual viewport.</p>
   <div class="example" id="example-b382d1f5">
    <a class="self-link" href="#example-b382d1f5"></a> If an author updates a style inside a <code>requestAnimationFrame</code>, e.g. 
<pre class="lang-javascript highlight">requestAnimationFrame<c- p>(</c-><c- a>function</c-><c- p>()</c-> <c- p>{</c->
    element<c- p>.</c->styleMap<c- p>.</c->set<c- p>(</c-><c- t>'--custom-prop-invalidates-paint'</c-><c- p>,</c-> <c- mi>42</c-><c- p>);</c->
<c- p>});</c->
</pre>
    <p>And the <code>element</code> is inside the visual viewport, the user agent is required to <a data-link-type="dfn" href="#draw-a-paint-image" id="ref-for-draw-a-paint-image④">draw a paint image</a> and display the result for the current frame.</p>
   </div>
   <p>The <a data-link-type="dfn" href="#draw-a-paint-image" id="ref-for-draw-a-paint-image⑤">draw a paint image</a> function is invoked by the user agent during the <a data-link-type="dfn" href="https://drafts.csswg.org/css-images-3/#object-size-negotiation" id="ref-for-object-size-negotiation">object size
negotiation</a> algorithm which is responsible for rendering an <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-images-3/#typedef-image" id="ref-for-typedef-image⑥">&lt;image></a>, with <var>snappedConcreteObjectSize</var> defined as follows. Let <var>concreteObjectSize</var> be the <a data-link-type="dfn" href="https://drafts.csswg.org/css-images-3/#concrete-object-size" id="ref-for-concrete-object-size①">concrete object
size</a> of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#box" id="ref-for-box①">box</a>.  The <var>snappedConcreteObjectSize</var> is usually the same as the <var>concreteObjectSize</var>. However, the user agent may adjust the size such that it paints to pixel
boundaries. If it does, the user agent should adjust the <var>snappedConcreteObjectSize</var> by the
proportional change from its original size such that the <a class="production css" data-link-type="function" href="#funcdef-paint" id="ref-for-funcdef-paint⑦">&lt;paint()></a> function can adjust the drawing
accordingly.</p>
   <p>For the purposes of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-images-3/#object-size-negotiation" id="ref-for-object-size-negotiation①">object size negotiation</a> algorithm, the paint image has no <a data-link-type="dfn" href="https://drafts.csswg.org/css-images-3/#intrinsic-dimensions" id="ref-for-intrinsic-dimensions">intrinsic dimensions</a>.</p>
   <p class="note" role="note"><span>Note:</span> In a future version of the spec, the author could have the ability to specify the <a data-link-type="dfn" href="https://drafts.csswg.org/css-images-3/#intrinsic-dimensions" id="ref-for-intrinsic-dimensions①">intrinsic
    dimensions</a> of the paint image. This will probably be exposed as a callback allowing the
    author to define static <a data-link-type="dfn" href="https://drafts.csswg.org/css-images-3/#intrinsic-dimensions" id="ref-for-intrinsic-dimensions②">intrinsic dimensions</a> or dynamically updating the <a data-link-type="dfn" href="https://drafts.csswg.org/css-images-3/#intrinsic-dimensions" id="ref-for-intrinsic-dimensions③">intrinsic
    dimensions</a> based on computed style and size changes.</p>
   <p>The <code class="idl"><a data-link-type="idl" href="#paintsize" id="ref-for-paintsize①">PaintSize</a></code> object represents the size of the image that the author should draw. This is
the <var>snappedConcreteObjectSize</var> given by the user agent.</p>
   <p class="note" role="note"><span>Note:</span> See <a href="https://www.w3.org/TR/css3-images/#object-sizing-examples">CSS Images 3 §5.4 Examples of CSS Object Sizing</a> for examples on how the <a data-link-type="dfn" href="https://drafts.csswg.org/css-images-3/#concrete-object-size" id="ref-for-concrete-object-size②">concrete object
    size</a> is calculated.</p>
   <p>The <a data-link-type="dfn" href="#draw-a-paint-image" id="ref-for-draw-a-paint-image⑥">draw a paint image</a> function may be speculatively invoked by the user agent at any point,
with any <var>snappedConcreteObjectSize</var>. The resulting image is not displayed.</p>
   <p class="note" role="note"><span>Note:</span> User agents may use any heuristic to speculate a possible future value for <var>snappedConcreteObjectSize</var>, for example speculating that the size remains unchanged.</p>
   <p class="note" role="note"><span>Note:</span> Although the image is not displayed, it may still be cached, and subsequent invocations of <a class="production css" data-link-type="function" href="#funcdef-paint" id="ref-for-funcdef-paint⑧">&lt;paint()></a> may use the cached image.</p>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed②"><c- g>Exposed</c-></a>=<c- n>PaintWorklet</c->]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="paintsize"><code><c- g>PaintSize</c-></code></dfn> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double"><c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="PaintSize" data-dfn-type="attribute" data-export data-readonly data-type="double" id="dom-paintsize-width"><code><c- g>width</c-></code><a class="self-link" href="#dom-paintsize-width"></a></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①"><c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="PaintSize" data-dfn-type="attribute" data-export data-readonly data-type="double" id="dom-paintsize-height"><code><c- g>height</c-></code><a class="self-link" href="#dom-paintsize-height"></a></dfn>;
};
</pre>
   <div class="algorithm" data-algorithm="draw a paint image">
     When the user agent wants to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="draw-a-paint-image">draw a paint image</dfn> of a <a class="production css" data-link-type="function" href="#funcdef-paint" id="ref-for-funcdef-paint⑨">&lt;paint()></a> function for a <var>box</var> into its appropriate stacking level (as defined by the property the CSS property its associated
with), given <var>snappedConcreteObjectSize</var> it <em>must</em> run the following steps: 
    <ol>
     <li data-md>
      <p>Let <var>paintFunction</var> be the <a class="production css" data-link-type="function" href="#funcdef-paint" id="ref-for-funcdef-paint①⓪">&lt;paint()></a> function on the <var>box</var> which the user agent wants to
draw.</p>
     <li data-md>
      <p>Let <var>name</var> be the first argument of the <var>paintFunction</var>.</p>
     <li data-md>
      <p>Let <var>documentPaintDefinitionMap</var> be the associated <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document" id="ref-for-concept-document③">document’s</a> <a data-link-type="dfn" href="#document-paint-definitions" id="ref-for-document-paint-definitions①">document paint
definitions</a> map.</p>
     <li data-md>
      <p>If <var>documentPaintDefinitionMap</var>[<var>name</var>] does not <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#map-exists" id="ref-for-map-exists②">exist</a>, let the image output
be an <a data-link-type="dfn" href="https://drafts.csswg.org/css-images-4/#invalid-image" id="ref-for-invalid-image②">invalid image</a> and abort all these steps.</p>
     <li data-md>
      <p>Let <var>documentDefinition</var> be the result of <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#map-get" id="ref-for-map-get①">get</a> <var>documentPaintDefinitionMap</var>[<var>name</var>].</p>
     <li data-md>
      <p>If <var>documentDefinition</var> is <code>"invalid"</code>, let the image output be an <a data-link-type="dfn" href="https://drafts.csswg.org/css-images-4/#invalid-image" id="ref-for-invalid-image③">invalid
image</a> and abort all these steps.</p>
     <li data-md>
      <p>Let <var>inputArgumentSyntaxes</var> be <var>documentDefinition</var>’s <a data-link-type="dfn" href="#document-paint-definition-input-argument-syntaxes" id="ref-for-document-paint-definition-input-argument-syntaxes②">input argument syntaxes</a>.</p>
     <li data-md>
      <p>Let <var>inputArguments</var> be the <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list" id="ref-for-list④">list</a> of all the <var>paintFunction</var> arguments <em>after</em> the "paint name" argument.</p>
     <li data-md>
      <p>If <var>inputArguments</var> do not match the registered grammar given by <var>inputArgumentSyntaxes</var>, let
the image output be an <a data-link-type="dfn" href="https://drafts.csswg.org/css-images-4/#invalid-image" id="ref-for-invalid-image④">invalid image</a> and abort all these steps.</p>
      <div class="example" id="example-a43f39b7">
       <a class="self-link" href="#example-a43f39b7"></a> This step may fail in the following cases: 
<pre class="lang-javascript highlight"><c- c1>// paint.js</c->
registerPaint<c- p>(</c-><c- t>'failing-argument-syntax'</c-><c- p>,</c-> <c- kr>class</c-> <c- p>{</c->
    <c- kr>static</c-> get inputArguments<c- p>()</c-> <c- p>{</c-> <c- k>return</c-> <c- p>[</c-><c- t>'&lt;length>'</c-><c- p>];</c-> <c- p>}</c->
    paint<c- p>(</c->ctx<c- p>,</c-> size<c- p>,</c-> styleMap<c- p>,</c-> args<c- p>)</c-> <c- p>{</c-> <c- d>/* paint code here. */</c-> <c- p>}</c->
<c- p>});</c->
</pre>
<pre class="lang-markup highlight"><c- p>&lt;</c-><c- f>style</c-><c- p>></c->
    <c- p>.</c-><c- nc>example-1</c-> <c- p>{</c->
        <c- k>background-image</c-><c- p>:</c-> <c- nf>paint</c-><c- p>(</c-><c- n>failing</c-><c- o>-</c-><c- n>argument</c-><c- o>-</c-><c- n>syntax</c-><c- p>,</c-> <c- kc>red</c-><c- p>);</c->
    <c- p>}</c->
    <c- p>.</c-><c- nc>example-2</c-> <c- p>{</c->
        <c- k>background-image</c-><c- p>:</c-> <c- nf>paint</c-><c- p>(</c-><c- n>failing</c-><c- o>-</c-><c- n>argument</c-><c- o>-</c-><c- n>syntax</c-><c- p>,</c-> <c- mi>1</c-><c- b>px</c-><c- p>,</c-> <c- mi>2</c-><c- b>px</c-><c- p>);</c->
    <c- p>}</c->
<c- p>&lt;/</c-><c- f>style</c-><c- p>></c->
<c- p>&lt;</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>example-1</c-><c- p>>&lt;/</c-><c- f>div</c-><c- p>></c->
<c- p>&lt;</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>example-2</c-><c- p>>&lt;/</c-><c- f>div</c-><c- p>></c->
<c- p>&lt;</c-><c- f>script</c-><c- p>></c->
    CSS<c- p>.</c->paintWorklet<c- p>.</c->addModule<c- p>(</c-><c- t>'paint.js'</c-><c- p>);</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>></c->
</pre>
       <p><code>example-1</code> produces an <a data-link-type="dfn" href="https://drafts.csswg.org/css-images-4/#invalid-image" id="ref-for-invalid-image⑤">invalid image</a> as <code>"red"</code> does not
    match the registered grammar.</p>
       <p><code>example-2</code> produces an <a data-link-type="dfn" href="https://drafts.csswg.org/css-images-4/#invalid-image" id="ref-for-invalid-image⑥">invalid image</a> as there are too many function
    arguments.</p>
      </div>
     <li data-md>
      <p>Let <var>workletGlobalScope</var> be a <code class="idl"><a data-link-type="idl" href="#paintworkletglobalscope" id="ref-for-paintworkletglobalscope⑦">PaintWorkletGlobalScope</a></code> from the list of <a data-link-type="dfn" href="https://drafts.css-houdini.org/worklets/#worklets-workletglobalscopes" id="ref-for-worklets-workletglobalscopes">worklet’s
WorkletGlobalScopes</a> from the paint <code class="idl"><a data-link-type="idl" href="https://drafts.css-houdini.org/worklets/#worklet" id="ref-for-worklet③">Worklet</a></code>, following the rules defined in <a href="#global-scope-selection">§ 7.1 Global Scope Selection</a>.</p>
      <p>The user agent <em>may</em> also <a data-link-type="dfn" href="https://drafts.css-houdini.org/worklets/#create-a-workletglobalscope" id="ref-for-create-a-workletglobalscope">create a WorkletGlobalScope</a> at this time, given the
paint <code class="idl"><a data-link-type="idl" href="https://drafts.css-houdini.org/worklets/#worklet" id="ref-for-worklet④">Worklet</a></code>.</p>
     <li data-md>
      <p>Run <a data-link-type="dfn" href="#invoke-a-paint-callback" id="ref-for-invoke-a-paint-callback">invoke a paint callback</a> given <var>name</var>, <var>inputArguments</var>, <var>snappedConcreteObjectSize</var>, <var>workletGlobalScope</var> optionally <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/infrastructure.html#in-parallel" id="ref-for-in-parallel">in parallel</a>.</p>
      <p class="note" role="note"><span>Note:</span> If the user agent runs <a data-link-type="dfn" href="#invoke-a-paint-callback" id="ref-for-invoke-a-paint-callback①">invoke a paint callback</a> on a thread <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/infrastructure.html#in-parallel" id="ref-for-in-parallel①">in parallel</a>,
    it should select a paint worklet global scope which can be used on that thread.</p>
    </ol>
   </div>
   <div class="algorithm" data-algorithm="invoke a paint callback">
     When the user agent wants to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="invoke-a-paint-callback">invoke a paint callback</dfn> given <var>name</var>, <var>inputArguments</var>, <var>snappedConcreteObjectSize</var>, and <var>workletGlobalScope</var>, it <em>must</em> run the following steps: 
    <ol>
     <li data-md>
      <p>Let <var>paintDefinitionMap</var> be <var>workletGlobalScope</var>’s <a data-link-type="dfn" href="#paint-definitions" id="ref-for-paint-definitions①">paint definitions</a> map.</p>
     <li data-md>
      <p>If <var>paintDefinitionMap</var>[<var>name</var>] does not <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#map-exists" id="ref-for-map-exists③">exist</a>, run the following steps:</p>
      <ol>
       <li data-md>
        <p><a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task" id="ref-for-queue-a-task①">Queue a task</a> to run the following steps:</p>
        <ol>
         <li data-md>
          <p>Let <var>documentPaintDefinitionMap</var> be the associated <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document" id="ref-for-concept-document④">document</a>'s <a data-link-type="dfn" href="#document-paint-definitions" id="ref-for-document-paint-definitions②">document
paint definitions</a> map.</p>
         <li data-md>
          <p><a data-link-type="dfn" href="https://infra.spec.whatwg.org/#map-set" id="ref-for-map-set③">Set</a> <var>documentPaintDefinitionMap</var>[<var>name</var>] to <code>"invalid"</code>.</p>
         <li data-md>
          <p>The user agent <em>should</em> log an error to the debugging console stating that a
class wasn’t registered in all <code class="idl"><a data-link-type="idl" href="#paintworkletglobalscope" id="ref-for-paintworkletglobalscope⑧">PaintWorkletGlobalScope</a></code>s.</p>
        </ol>
       <li data-md>
        <p>Let the image output be an <a data-link-type="dfn" href="https://drafts.csswg.org/css-images-4/#invalid-image" id="ref-for-invalid-image⑦">invalid image</a> and abort all these steps.</p>
      </ol>
      <p class="note" role="note"><span>Note:</span> This handles the case where there could be a paint worklet global scope which didn’t
    receive the <code class="idl"><a data-link-type="idl" href="#dom-paintworkletglobalscope-registerpaint" id="ref-for-dom-paintworkletglobalscope-registerpaint④">registerPaint(name, paintCtor)</a></code> for <var>name</var> (however another global scope
    did). A paint callback which is invoked on the other global scope could succeed, but
    wont succeed on a subsequent frame when <a data-link-type="dfn" href="#draw-a-paint-image" id="ref-for-draw-a-paint-image⑦">draw a paint image</a> is called.</p>
     <li data-md>
      <p>Let <var>definition</var> be the result of <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-get-o-p" id="ref-for-sec-get-o-p⑤">get</a> <var>paintDefinitionMap</var>[<var>name</var>].</p>
     <li data-md>
      <p>Let <var>paintClassInstanceMap</var> be <var>workletGlobalScope</var>’s <a data-link-type="dfn" href="#paint-class-instances" id="ref-for-paint-class-instances①">paint class instances</a> map.</p>
     <li data-md>
      <p>Let <var>paintInstance</var> be the result of <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-get-o-p" id="ref-for-sec-get-o-p⑥">get</a> <var>paintClassInstanceMap</var>[|name]|. If <var>paintInstance</var> is null, run the following steps:</p>
      <ol>
       <li data-md>
        <p>If the <a data-link-type="dfn" href="#paint-definition-constructor-valid-flag" id="ref-for-paint-definition-constructor-valid-flag①">constructor valid flag</a> on <var>definition</var> is false, let the image output be an <a data-link-type="dfn" href="https://drafts.csswg.org/css-images-4/#invalid-image" id="ref-for-invalid-image⑧">invalid image</a> and abort all these steps.</p>
       <li data-md>
        <p>Let <var>paintCtor</var> be the <a data-link-type="dfn" href="#paint-definition-class-constructor" id="ref-for-paint-definition-class-constructor①">class constructor</a> on <var>definition</var>.</p>
       <li data-md>
        <p>Let <var>paintInstance</var> be the result of <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-construct" id="ref-for-sec-construct">Construct</a>(<var>paintCtor</var>).</p>
        <p>If <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-construct" id="ref-for-sec-construct①">construct</a> throws an exception,
set the <var>definition</var>’s <a data-link-type="dfn" href="#paint-definition-constructor-valid-flag" id="ref-for-paint-definition-constructor-valid-flag②">constructor valid flag</a> to false,
let the image output be an <a data-link-type="dfn" href="https://drafts.csswg.org/css-images-4/#invalid-image" id="ref-for-invalid-image⑨">invalid image</a> and abort all these
steps.</p>
       <li data-md>
        <p><a data-link-type="dfn" href="https://infra.spec.whatwg.org/#map-set" id="ref-for-map-set④">Set</a> <var>paintClassInstanceMap</var>[<var>name</var>] to <var>paintInstance</var>.</p>
      </ol>
     <li data-md>
      <p>Let <var>inputProperties</var> be <var>definition</var>’s <a data-link-type="dfn" href="#paint-definition-input-properties" id="ref-for-paint-definition-input-properties①">input properties</a>.</p>
     <li data-md>
      <p>Let <var>styleMap</var> be a new <code class="idl"><a data-link-type="idl" href="https://drafts.css-houdini.org/css-typed-om-1/#stylepropertymapreadonly" id="ref-for-stylepropertymapreadonly">StylePropertyMapReadOnly</a></code> populated with <em>only</em> the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#computed-value" id="ref-for-computed-value①">computed value</a>'s for properties listed in <var>inputProperties</var>.</p>
     <li data-md>
      <p>Let <var>renderingContext</var> be the result of <a data-link-type="dfn" href="#create-a-paintrenderingcontext2d-object" id="ref-for-create-a-paintrenderingcontext2d-object">create a PaintRenderingContext2D object</a> given:</p>
      <ul>
       <li data-md>
        <p>"width" - The width given by <var>snappedConcreteObjectSize</var>.</p>
       <li data-md>
        <p>"height" - The height given by <var>snappedConcreteObjectSize</var>.</p>
       <li data-md>
        <p>"paintRenderingContext2DSettings" - The <a data-link-type="dfn" href="#paint-definition-paintrenderingcontext2dsettings-object" id="ref-for-paint-definition-paintrenderingcontext2dsettings-object①">PaintRenderingContext2DSettings object</a> given by <var>definition</var>.</p>
      </ul>
      <p class="note" role="note"><span>Note:</span> The <var>renderingContext</var> is not be re-used between invocations of paint. Implicitly this
    means that there is no stored data, or state on the <var>renderingContext</var> between
    invocations. For example you can’t setup a clip on the context, and expect the same clip
    to be applied next time the paint method is called.</p>
      <p class="note" role="note"><span>Note:</span> Implicitly this also means that <var>renderingContext</var> is effectively "neutered" after a
    paint method is complete. The author code may hold a reference to <var>renderingContext</var> and
    invoke methods on it, but this will have no effect on the current image, or subsequent
    images.</p>
     <li data-md>
      <p>Let <var>paintSize</var> be a new <code class="idl"><a data-link-type="idl" href="#paintsize" id="ref-for-paintsize②">PaintSize</a></code> initialized to the width and height defined by <var>snappedConcreteObjectSize</var>.</p>
     <li data-md>
      <p>At this stage the user agent may re-use an image from a previous invocation if <var>paintSize</var>, <var>styleMap</var>, <var>inputArguments</var> are equivalent to that previous invocation. If so let the image
output be that cached image and abort all these steps.</p>
      <div class="note" role="note">
        In the example below, both <code>div-1</code> and <code>div-2</code> have paint
    functions which have equivalent javascript arguments. A user-agent can cache the result
    of one invocation and use it for both elements. 
<pre class="lang-javascript highlight"><c- c1>// paint.js</c->
registerPaint<c- p>(</c-><c- t>'simple'</c-><c- p>,</c-> <c- kr>class</c-> <c- p>{</c->
    paint<c- p>(</c->ctx<c- p>,</c-> size<c- p>)</c-> <c- p>{</c->
        ctx<c- p>.</c->fillStyle <c- o>=</c-> <c- t>'green'</c-><c- p>;</c->
        ctx<c- p>.</c->fillRect<c- p>(</c-><c- mi>0</c-><c- p>,</c-> <c- mi>0</c-><c- p>,</c-> size<c- p>.</c->width<c- p>,</c-> size<c- p>.</c->height<c- p>);</c->
    <c- p>}</c->
<c- p>});</c->
</pre>
<pre class="lang-markup highlight"><c- p>&lt;</c-><c- f>style</c-><c- p>></c->
    <c- p>.</c-><c- nc>div-1</c-> <c- p>{</c->
        <c- k>width</c-><c- p>:</c-> <c- mi>50</c-><c- b>px</c-><c- p>;</c->
        <c- k>height</c-><c- p>:</c-> <c- mi>50</c-><c- b>px</c-><c- p>;</c->
        <c- k>background-image</c-><c- p>:</c-> <c- nf>paint</c-><c- p>(</c-><c- n>simple</c-><c- p>);</c->
    <c- p>}</c->
    <c- p>.</c-><c- nc>div-2</c-> <c- p>{</c->
        <c- k>width</c-><c- p>:</c-> <c- mi>100</c-><c- b>px</c-><c- p>;</c->
        <c- k>height</c-><c- p>:</c-> <c- mi>100</c-><c- b>px</c-><c- p>;</c->

        <c- k>background-size</c-><c- p>:</c-> <c- mi>50</c-><c- b>%</c-> <c- mi>50</c-><c- b>%</c-><c- p>;</c->
        <c- k>background-image</c-><c- p>:</c-> <c- nf>paint</c-><c- p>(</c-><c- n>simple</c-><c- p>);</c->
    <c- p>}</c->
<c- p>&lt;/</c-><c- f>style</c-><c- p>></c->
<c- p>&lt;</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>div-1</c-><c- p>>&lt;/</c-><c- f>div</c-><c- p>></c->
<c- p>&lt;</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>div-2</c-><c- p>>&lt;/</c-><c- f>div</c-><c- p>></c->
<c- p>&lt;</c-><c- f>script</c-><c- p>></c->
    CSS<c- p>.</c->paintWorklet<c- p>.</c->addModule<c- p>(</c-><c- t>'paint.js'</c-><c- p>);</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>></c->
</pre>
      </div>
     <li data-md>
      <p>Let <var>paintFunctionCallback</var> be <var>definition</var>’s <a data-link-type="dfn" href="#paint-definition-paint-function" id="ref-for-paint-definition-paint-function①">paint function</a>.</p>
     <li data-md>
      <p><a data-link-type="dfn" href="https://heycam.github.io/webidl/#invoke-a-callback-function" id="ref-for-invoke-a-callback-function">Invoke</a> <var>paintFunctionCallback</var> with arguments «<var>renderingContext</var>, <var>paintSize</var>, <var>styleMap</var>, <var>inputArguments</var>», and with <var>paintInstance</var> as the <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-callback-this-value" id="ref-for-dfn-callback-this-value">callback this value</a>.</p>
      <p>If <var>paintFunctionCallback</var> does not complete within an acceptable time (as determined by the
user agent, i.e. it is a "long running script") the user agent <em>may</em> terminate the
script, let the image output be an <a data-link-type="dfn" href="https://drafts.csswg.org/css-images-4/#invalid-image" id="ref-for-invalid-image①⓪">invalid image</a>, and abort all these steps.</p>
      <p class="note" role="note"><span>Note:</span> User agents could provide tooling within their debugging tools to show authors how
    expensive their paint classes are. User agents could also how an "unresponsive script"
    dialog in this case if appropriate.</p>
     <li data-md>
      <p>The image output is to be produced from the <var>renderingContext</var> given to the method.</p>
      <p>If an exception is <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw⑦">thrown</a> the let the image output be an <a data-link-type="dfn" href="https://drafts.csswg.org/css-images-4/#invalid-image" id="ref-for-invalid-image①①">invalid image</a>.</p>
    </ol>
    <p class="note" role="note"><span>Note:</span> The contents of the resulting image are not designed to be accessible. Authors can communicate
    any useful information through the standard accessibility APIs.</p>
   </div>
   <h3 class="heading settled" data-level="7.1" id="global-scope-selection"><span class="secno">7.1. </span><span class="content">Global Scope Selection</span><a class="self-link" href="#global-scope-selection"></a></h3>
   <p>When the user agent needs to select a <code class="idl"><a data-link-type="idl" href="#paintworkletglobalscope" id="ref-for-paintworkletglobalscope⑨">PaintWorkletGlobalScope</a></code> from the paint <a data-link-type="dfn" href="https://drafts.css-houdini.org/worklets/#worklets-workletglobalscopes" id="ref-for-worklets-workletglobalscopes①">worklet’s
WorkletGlobalScopes</a> <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list" id="ref-for-list⑤">list</a> it <em>must</em>:</p>
   <ul>
    <li data-md>
     <p>Select from at <em>least</em> two <code class="idl"><a data-link-type="idl" href="#paintworkletglobalscope" id="ref-for-paintworkletglobalscope①⓪">PaintWorkletGlobalScope</a></code>s, unless the user agent is under
memory constraints.</p>
    <li data-md>
     <p><em>Not</em> re-use the same <code class="idl"><a data-link-type="idl" href="#paintworkletglobalscope" id="ref-for-paintworkletglobalscope①①">PaintWorkletGlobalScope</a></code> more than 1000 times in a row.</p>
     <p class="note" role="note"><span>Note:</span> The 1000 limit was picked as a high upper bound, this limit may improve (downwards)
    over time.</p>
   </ul>
   <p class="note" role="note"><span>Note:</span> These rules exist to ensure that authors do not rely on being able to store state on the
    global object or non-regeneratable state on the class. See <a href="https://www.w3.org/TR/worklets-1/#code-idempotency">Worklets 1 §1.2 Code Idempotency</a>.</p>
   <h2 class="heading settled" data-level="8" id="examples"><span class="secno">8. </span><span class="content">Examples</span><a class="self-link" href="#examples"></a></h2>
   <h3 class="heading settled" data-level="8.1" id="example-1"><span class="secno">8.1. </span><span class="content">Example 1: Colored Circle</span><a class="self-link" href="#example-1"></a></h3>
   <p>The example below makes use of the fact that <a class="production css" data-link-type="function" href="#funcdef-paint" id="ref-for-funcdef-paint①①">&lt;paint()></a> functions are able to be animated. E.g.
when the textarea is focused in the example below, the <code>--circle-color</code> property will
transition from <code>deepskyblue</code> to <code>purple</code>.</p>
   <p>This ability isn’t limited to just transitions, it also applies to CSS animations, and the Web
Animations API.</p>
<pre class="lang-markup highlight"><c- cp>&lt;!DOCTYPE html></c->
<c- p>&lt;</c-><c- f>style</c-><c- p>></c->
  <c- p>#</c-><c- nn>example</c-> <c- p>{</c->
    --<c- n>circle-color</c-><c- p>:</c-> <c- kc>deepskyblue</c-><c- p>;</c->

    <c- k>background-image</c-><c- p>:</c-> <c- nf>paint</c-><c- p>(</c-><c- kc>circle</c-><c- p>);</c->
    <c- k>font-family</c-><c- p>:</c-> <c- kc>sans-serif</c-><c- p>;</c->
    <c- k>font-size</c-><c- p>:</c-> <c- mi>36</c-><c- b>px</c-><c- p>;</c->
    <c- k>transition</c-><c- p>:</c-> <c- o>--</c-><c- kc>circle</c-><c- o>-</c-><c- kc>color</c-> <c- mi>1</c-><c- b>s</c-><c- p>;</c->
  <c- p>}</c->

  <c- p>#</c-><c- nn>example</c-><c- p>:</c-><c- nd>focus</c-> <c- p>{</c->
    --<c- n>circle-color</c-><c- p>:</c-> <c- kc>purple</c-><c- p>;</c->
  <c- p>}</c->
<c- p>&lt;/</c-><c- f>style</c-><c- p>></c->

<c- p>&lt;</c-><c- f>textarea</c-> <c- e>id</c-><c- o>=</c-><c- s>"example"</c-><c- p>></c->
  CSS is awesome.
<c- p>&lt;/</c-><c- f>textarea</c-><c- p>></c->

<c- p>&lt;</c-><c- f>script</c-><c- p>></c->
    CSS<c- p>.</c->registerProperty<c- p>({</c->
      name<c- o>:</c-> <c- t>'--circle-color'</c-><c- p>,</c->
      syntax<c- o>:</c-> <c- t>'&lt;color>'</c-><c- p>,</c->
      initialValue<c- o>:</c-> <c- t>'black'</c-><c- p>,</c->
      inherits<c- o>:</c-> <c- kc>false</c->
    <c- p>});</c->
    CSS<c- p>.</c->paintWorklet<c- p>.</c->addModule<c- p>(</c-><c- t>'circle.js'</c-><c- p>);</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>></c->
</pre>
<pre class="lang-javascript highlight"><c- c1>// circle.js</c->
registerPaint<c- p>(</c-><c- t>'circle'</c-><c- p>,</c-> <c- kr>class</c-> <c- p>{</c->
  <c- kr>static</c-> get inputProperties<c- p>()</c-> <c- p>{</c-> <c- k>return</c-> <c- p>[</c-><c- t>'--circle-color'</c-><c- p>];</c-> <c- p>}</c->
  paint<c- p>(</c->ctx<c- p>,</c-> geom<c- p>,</c-> properties<c- p>)</c-> <c- p>{</c->
    <c- c1>// Change the fill color.</c->
    <c- kr>const</c-> color <c- o>=</c-> properties<c- p>.</c->get<c- p>(</c-><c- t>'--circle-color'</c-><c- p>);</c->
    ctx<c- p>.</c->fillStyle <c- o>=</c-> color<c- p>.</c->cssText<c- p>;</c->

    <c- c1>// Determine the center point and radius.</c->
    <c- kr>const</c-> x <c- o>=</c-> geom<c- p>.</c->width <c- o>/</c-> <c- mi>2</c-><c- p>;</c->
    <c- kr>const</c-> y <c- o>=</c-> geom<c- p>.</c->height <c- o>/</c-> <c- mi>2</c-><c- p>;</c->
    <c- kr>const</c-> radius <c- o>=</c-> Math<c- p>.</c->min<c- p>(</c->x<c- p>,</c-> y<c- p>);</c->

    <c- c1>// Draw the circle \o/</c->
    ctx<c- p>.</c->beginPath<c- p>();</c->
    ctx<c- p>.</c->arc<c- p>(</c->x<c- p>,</c-> y<c- p>,</c-> radius<c- p>,</c-> <c- mi>0</c-><c- p>,</c-> <c- mi>2</c-> <c- o>*</c-> Math<c- p>.</c->PI<c- p>,</c-> <c- kc>false</c-><c- p>);</c->
    ctx<c- p>.</c->fill<c- p>();</c->
  <c- p>}</c->
<c- p>});</c->
</pre>
   <h3 class="heading settled" data-level="8.2" id="example-2"><span class="secno">8.2. </span><span class="content">Example 2: Image Placeholder</span><a class="self-link" href="#example-2"></a></h3>
   <p>It is possible for an author to use paint to draw a placeholder image while an image is being
loaded.</p>
<pre class="lang-markup highlight"><c- cp>&lt;!DOCTYPE html></c->
<c- p>&lt;</c-><c- f>style</c-><c- p>></c->
<c- p>#</c-><c- nn>example</c-> <c- p>{</c->
    --<c- n>image</c-><c- p>:</c-> url<c- p>(</c-><c- t>'#someUrlWhichIsLoading'</c-><c- p>);</c->
    <c- k>background-image</c-><c- p>:</c-> <c- nf>paint</c-><c- p>(</c-><c- n>image</c-><c- o>-</c-><c- n>with</c-><c- o>-</c-><c- n>placeholder</c-><c- p>);</c->
<c- p>}</c->
<c- p>&lt;/</c-><c- f>style</c-><c- p>></c->

<c- p>&lt;</c-><c- f>div</c-> <c- e>id</c-><c- o>=</c-><c- s>"example"</c-><c- p>>&lt;/</c-><c- f>div</c-><c- p>></c->

<c- p>&lt;</c-><c- f>script</c-><c- p>></c->
    CSS<c- p>.</c->registerProperty<c- p>({</c->
        name<c- o>:</c-> <c- t>'--image'</c-><c- p>,</c->
        syntax<c- o>:</c-> <c- t>'&lt;image> | none'</c-><c- p>,</c->
        initialValue<c- o>:</c-> <c- t>'none'</c-><c- p>,</c->
    <c- p>});</c->
    CSS<c- p>.</c->paintWorklet<c- p>.</c->addModule<c- p>(</c-><c- t>'image-placeholder.js'</c-><c- p>);</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>></c->
</pre>
<pre class="lang-javascript highlight"><c- c1>// image-placeholder.js</c->
registerPaint<c- p>(</c-><c- t>'image-with-placeholder'</c-><c- p>,</c-> <c- kr>class</c-> <c- p>{</c->
    <c- kr>static</c-> get inputProperties<c- p>()</c-> <c- p>{</c-> <c- k>return</c-> <c- p>[</c-><c- t>'--image'</c-><c- p>];</c-> <c- p>}</c->
    paint<c- p>(</c->ctx<c- p>,</c-> geom<c- p>,</c-> properties<c- p>)</c-> <c- p>{</c->
        <c- kr>const</c-> img <c- o>=</c-> properties<c- p>.</c->get<c- p>(</c-><c- t>'--image'</c-><c- p>);</c->

        <c- k>switch</c-> <c- p>(</c->img<c- p>.</c->state<c- p>)</c-> <c- p>{</c->
            <c- k>case</c-> <c- t>'ready'</c-><c- o>:</c->
                <c- c1>// The image is loaded! Draw the image.</c->
                ctx<c- p>.</c->drawImage<c- p>(</c->img<c- p>,</c-> <c- mi>0</c-><c- p>,</c-> <c- mi>0</c-><c- p>,</c-> geom<c- p>.</c->width<c- p>,</c-> geom<c- p>.</c->height<c- p>);</c->
                <c- k>break</c-><c- p>;</c->
            <c- k>case</c-> <c- t>'pending'</c-><c- o>:</c->
                <c- c1>// The image is loading, draw some mountains.</c->
                drawMountains<c- p>(</c->ctx<c- p>);</c->
                <c- k>break</c-><c- p>;</c->
            <c- k>case</c-> <c- t>'invalid'</c-><c- o>:</c->
            <c- k>default</c-><c- o>:</c->
                <c- c1>// The image is invalid (e.g. it didn’t load), draw a sad face.</c->
                drawSadFace<c- p>(</c->ctx<c- p>);</c->
                <c- k>break</c-><c- p>;</c->
        <c- p>}</c->
    <c- p>}</c->
<c- p>});</c->
</pre>
   <h3 class="heading settled" data-level="8.3" id="example-3"><span class="secno">8.3. </span><span class="content">Example 3: Arcs</span><a class="self-link" href="#example-3"></a></h3>
<pre class="lang-markup highlight"><c- cp>&lt;!DOCTYPE html></c->
<c- p>&lt;</c-><c- f>style</c-><c- p>></c->
<c- p>#</c-><c- nn>example</c-> <c- p>{</c->
  <c- k>width</c-><c- p>:</c-> <c- mi>200</c-><c- b>px</c-><c- p>;</c->
  <c- k>height</c-><c- p>:</c-> <c- mi>200</c-><c- b>px</c-><c- p>;</c->

  <c- k>background-image</c-><c- p>:</c->
    <c- nf>paint</c-><c- p>(</c-><c- n>arc</c-><c- p>,</c-> <c- kc>purple</c-><c- p>,</c-> <c- mf>0.4</c-><c- b>turn</c-><c- p>,</c-> <c- mf>0.8</c-><c- b>turn</c-><c- p>,</c-> <c- mi>40</c-><c- b>px</c-><c- p>,</c-> <c- mi>15</c-><c- b>px</c-><c- p>),</c->
    <c- nf>paint</c-><c- p>(</c-><c- n>arc</c-><c- p>,</c-> <c- kc>blue</c-><c- p>,</c-> <c- mi>-20</c-><c- b>deg</c-><c- p>,</c-> <c- mi>170</c-><c- b>deg</c-><c- p>,</c-> <c- mi>30</c-><c- b>px</c-><c- p>,</c-> <c- mi>20</c-><c- b>px</c-><c- p>),</c->
    <c- nf>paint</c-><c- p>(</c-><c- n>arc</c-><c- p>,</c-> <c- kc>red</c-><c- p>,</c-> <c- mi>45</c-><c- b>deg</c-><c- p>,</c-> <c- mi>220</c-><c- b>deg</c-><c- p>,</c-> <c- mi>50</c-><c- b>px</c-><c- p>,</c-> <c- mi>10</c-><c- b>px</c-><c- p>);</c->
<c- p>}</c->
<c- p>&lt;/</c-><c- f>style</c-><c- p>></c->

<c- p>&lt;</c-><c- f>div</c-> <c- e>id</c-><c- o>=</c-><c- s>"example"</c-><c- p>>&lt;/</c-><c- f>div</c-><c- p>></c->

<c- p>&lt;</c-><c- f>script</c-><c- p>></c->
    CSS<c- p>.</c->paintWorklet<c- p>.</c->addModule<c- p>(</c-><c- t>'arc.js'</c-><c- p>);</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>></c->
</pre>
<pre class="lang-javascript highlight"><c- c1>// arc.js</c->
registerPaint<c- p>(</c-><c- t>'arc'</c-><c- p>,</c-> <c- kr>class</c-> <c- p>{</c->
  <c- kr>static</c-> get inputArguments<c- p>()</c-> <c- p>{</c->
    <c- k>return</c-> <c- p>[</c->
      <c- t>'&lt;color>'</c-><c- p>,</c->
      <c- t>'&lt;angle>'</c-><c- p>,</c->  <c- c1>// startAngle</c->
      <c- t>'&lt;angle>'</c-><c- p>,</c->  <c- c1>// endAngle</c->
      <c- t>'&lt;length>'</c-><c- p>,</c-> <c- c1>// radius</c->
      <c- t>'&lt;length>'</c-><c- p>,</c-> <c- c1>// lineWidth</c->
    <c- p>];</c->
  <c- p>}</c->

  paint<c- p>(</c->ctx<c- p>,</c-> geom<c- p>,</c-> _<c- p>,</c-> args<c- p>)</c-> <c- p>{</c->
    ctx<c- p>.</c->strokeStyle <c- o>=</c-> args<c- p>[</c-><c- mi>0</c-><c- p>].</c->cssText<c- p>;</c->

    <c- c1>// Determine the center point.</c->
    <c- kr>const</c-> x <c- o>=</c-> geom<c- p>.</c->width <c- o>/</c-> <c- mi>2</c-><c- p>;</c->
    <c- kr>const</c-> y <c- o>=</c-> geom<c- p>.</c->height <c- o>/</c-> <c- mi>2</c-><c- p>;</c->

    <c- c1>// Convert the start and end angles to radians.</c->
    <c- kr>const</c-> startAngle <c- o>=</c-> <c- k>this</c-><c- p>.</c->convertAngle<c- p>(</c->args<c- p>[</c-><c- mi>1</c-><c- p>])</c-> <c- o>-</c-> Math<c- p>.</c->PI <c- o>/</c-> <c- mi>2</c-><c- p>;</c->
    <c- kr>const</c-> endAngle <c- o>=</c-> <c- k>this</c-><c- p>.</c->convertAngle<c- p>(</c->args<c- p>[</c-><c- mi>2</c-><c- p>])</c-> <c- o>-</c-> Math<c- p>.</c->PI <c- o>/</c-> <c- mi>2</c-><c- p>;</c->

    <c- c1>// Convert the radius and lineWidth to px.</c->
    <c- kr>const</c-> radius <c- o>=</c-> <c- k>this</c-><c- p>.</c->convertLength<c- p>(</c->args<c- p>[</c-><c- mi>3</c-><c- p>]);</c->
    <c- kr>const</c-> lineWidth <c- o>=</c-> <c- k>this</c-><c- p>.</c->convertLength<c- p>(</c->args<c- p>[</c-><c- mi>4</c-><c- p>]);</c->

    ctx<c- p>.</c->lineWidth <c- o>=</c-> lineWidth<c- p>;</c->

    ctx<c- p>.</c->beginPath<c- p>();</c->
    ctx<c- p>.</c->arc<c- p>(</c->x<c- p>,</c-> y<c- p>,</c-> radius<c- p>,</c-> startAngle<c- p>,</c-> endAngle<c- p>,</c-> <c- kc>false</c-><c- p>);</c->
    ctx<c- p>.</c->stroke<c- p>();</c->
  <c- p>}</c->

  convertAngle<c- p>(</c->angle<c- p>)</c-> <c- p>{</c->
    <c- k>switch</c-> <c- p>(</c->angle<c- p>.</c->unit<c- p>)</c-> <c- p>{</c->
      <c- k>case</c-> <c- t>'deg'</c-><c- o>:</c->
        <c- k>return</c-> angle<c- p>.</c->value <c- o>*</c-> Math<c- p>.</c->PI <c- o>/</c-> <c- mi>180</c-><c- p>;</c->
      <c- k>case</c-> <c- t>'rad'</c-><c- o>:</c->
        <c- k>return</c-> angle<c- p>.</c->value<c- p>;</c->
      <c- k>case</c-> <c- t>'grad'</c-><c- o>:</c->
        <c- k>return</c-> angle<c- p>.</c->value <c- o>*</c-> Math<c- p>.</c->PI <c- o>/</c-> <c- mi>200</c-><c- p>;</c->
      <c- k>case</c-> <c- t>'turn'</c-><c- o>:</c->
        <c- k>return</c-> angle<c- p>.</c->value <c- o>*</c-> Math<c- p>.</c->PI <c- o>/</c-> <c- mf>0.5</c-><c- p>;</c->
      <c- k>default</c-><c- o>:</c->
        <c- k>throw</c-> Error<c- p>(</c-><c- sb>`Unknown angle unit: </c-><c- si>${</c->angle<c- p>.</c->unit<c- si>}</c-><c- sb>`</c-><c- p>);</c->
    <c- p>}</c->
  <c- p>}</c->

  convertLength<c- p>(</c->length<c- p>)</c-> <c- p>{</c->
    <c- k>switch</c-> <c- p>(</c->length<c- p>.</c->type<c- p>)</c-> <c- p>{</c->
      <c- k>case</c-> <c- t>'px'</c-><c- o>:</c->
        <c- k>return</c-> length<c- p>.</c->value<c- p>;</c->
      <c- k>default</c-><c- o>:</c->
        <c- k>throw</c-> Error<c- p>(</c-><c- sb>`Unkown length type: </c-><c- si>${</c->length<c- p>.</c->type<c- si>}</c-><c- sb>`</c-><c- p>);</c->
    <c- p>}</c->
  <c- p>}</c->
<c- p>});</c->
</pre>
   <h3 class="heading settled" data-level="8.4" id="example-4"><span class="secno">8.4. </span><span class="content">Example 4: Different Colors (based on size)</span><a class="self-link" href="#example-4"></a></h3>
<pre class="lang-markup highlight"><c- p>&lt;</c-><c- f>h1</c-><c- p>></c->
    Heading 1
<c- p>&lt;/</c-><c- f>h1</c-><c- p>></c->
<c- p>&lt;</c-><c- f>h1</c-><c- p>></c->
    Another heading
<c- p>&lt;/</c-><c- f>h1</c-><c- p>></c->

<c- p>&lt;</c-><c- f>style</c-><c- p>></c->
<c- f>h1</c-> <c- p>{</c->
    <c- k>background-image</c-><c- p>:</c-> <c- nf>paint</c-><c- p>(</c-><c- n>heading</c-><c- o>-</c-><c- kc>color</c-><c- p>);</c->
<c- p>}</c->
<c- p>&lt;/</c-><c- f>style</c-><c- p>></c->

<c- p>&lt;</c-><c- f>script</c-><c- p>></c->
    CSS<c- p>.</c->paintWorklet<c- p>.</c->addModule<c- p>(</c-><c- t>'heading-color.js'</c-><c- p>);</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>></c->
</pre>
<pre class="lang-javascript highlight"><c- c1>// heading-color.js</c->
registerPaint<c- p>(</c-><c- t>'heading-color'</c-><c- p>,</c-> <c- kr>class</c-> <c- p>{</c->
    <c- kr>static</c-> get inputProperties<c- p>()</c-> <c- p>{</c-> <c- k>return</c-> <c- p>[];</c-> <c- p>}</c->
    paint<c- p>(</c->ctx<c- p>,</c-> geom<c- p>,</c-> properties<c- p>)</c-> <c- p>{</c->
        <c- c1>// Select a color based on the width and height of the image.</c->
        <c- kr>const</c-> width <c- o>=</c-> geom<c- p>.</c->width<c- p>;</c->
        <c- kr>const</c-> height <c- o>=</c-> geom<c- p>.</c->height<c- p>;</c->
        <c- kr>const</c-> color <c- o>=</c-> colorArray<c- p>[(</c->width <c- o>*</c-> height<c- p>)</c-> <c- o>%</c-> colorArray<c- p>.</c->length<c- p>];</c->

        <c- c1>// Draw just a solid image.</c->
        ctx<c- p>.</c->fillStyle <c- o>=</c-> color<c- p>;</c->
        ctx<c- p>.</c->fillRect<c- p>(</c-><c- mi>0</c-><c- p>,</c-> <c- mi>0</c-><c- p>,</c-> width<c- p>,</c-> height<c- p>);</c->
    <c- p>}</c->
<c- p>});</c->
</pre>
   <h3 class="heading settled" data-level="8.5" id="example-5"><span class="secno">8.5. </span><span class="content">Example 5: Drawing outside an element’s area</span><a class="self-link" href="#example-5"></a></h3>
   <p>It is possible to draw outside an element’s area by using the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-image" id="ref-for-propdef-border-image">border-image</a> property.</p>
<pre class="lang-markup highlight"><c- p>&lt;</c-><c- f>style</c-><c- p>></c->
<c- p>#</c-><c- nn>overdraw</c-> <c- p>{</c->
    --<c- k>border-width</c-><c- p>:</c-> <c- mi>10</c-><c- p>;</c->

    <c- k>border-style</c-><c- p>:</c-> <c- kc>solid</c-><c- p>;</c->
    <c- k>border-width</c-><c- p>:</c-> calc<c- p>(</c-><c- nf>var</c-><c- p>(</c-><c- o>--</c-><c- n>border</c-><c- o>-</c-><c- n>width</c-><c- p>)</c-> <c- o>*</c-> <c- mi>1</c-><c- b>px</c-><c- p>);</c->

    <c- k>border-image-source</c-><c- p>:</c-> <c- nf>paint</c-><c- p>(</c-><c- n>overdraw</c-><c- p>);</c->
    <c- k>border-image-slice</c-><c- p>:</c-> <c- mi>0</c-> <c- kc>fill</c-><c- p>;</c->
    <c- k>border-image-outset</c-><c- p>:</c-> calc<c- p>(</c-><c- nf>var</c-><c- p>(</c-><c- o>--</c-><c- n>border</c-><c- o>-</c-><c- n>width</c-><c- p>)</c-> <c- o>*</c-> <c- mi>1</c-><c- b>px</c-><c- p>);</c->

    <c- k>width</c-><c- p>:</c-> <c- mi>200</c-><c- b>px</c-><c- p>;</c->
    <c- k>height</c-><c- p>:</c-> <c- mi>200</c-><c- b>px</c-><c- p>;</c->
<c- p>}</c->
<c- p>&lt;/</c-><c- f>style</c-><c- p>></c->
<c- p>&lt;</c-><c- f>div</c-> <c- e>id</c-><c- o>=</c-><c- s>"overdraw"</c-><c- p>>&lt;/</c-><c- f>div</c-><c- p>></c->
<c- p>&lt;</c-><c- f>script</c-><c- p>></c->
    CSS<c- p>.</c->paintWorklet<c- p>.</c->addModule<c- p>(</c-><c- t>'overdraw.js'</c-><c- p>);</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>></c->
</pre>
<pre class="lang-javascript highlight"><c- c1>// overdraw.js</c->
registerPaint<c- p>(</c-><c- t>'overdraw'</c-><c- p>,</c-> <c- kr>class</c-> <c- p>{</c->
    <c- kr>static</c-> get inputProperties<c- p>()</c-> <c- p>{</c-> <c- k>return</c-> <c- p>[</c-><c- t>'--border-width'</c-><c- p>];</c-> <c- p>}</c->
    paint<c- p>(</c->ctx<c- p>,</c-> geom<c- p>,</c-> properties<c- p>)</c-> <c- p>{</c->
        <c- kr>const</c-> borderWidth <c- o>=</c-> parseInt<c- p>(</c->properties<c- p>.</c->get<c- p>(</c-><c- t>'--border-width'</c-><c- p>));</c->
        ctx<c- p>.</c->shadowColor <c- o>=</c-> <c- t>'rgba(0,0,0,0.25)'</c-><c- p>;</c->
        ctx<c- p>.</c->shadowBlur <c- o>=</c-> borderWidth<c- p>;</c->

        ctx<c- p>.</c->fillStyle <c- o>=</c-> <c- t>'rgba(255, 255, 255, 1)'</c-><c- p>;</c->
        ctx<c- p>.</c->fillRect<c- p>(</c->borderWidth<c- p>,</c->
                     borderWidth<c- p>,</c->
                     geom<c- p>.</c->width <c- o>-</c-> <c- mi>2</c-> <c- o>*</c-> borderWidth<c- p>,</c->
                     geom<c- p>.</c->height <c- o>-</c-> <c- mi>2</c-> <c- o>*</c-> borderWidth<c- p>);</c->
    <c- p>}</c->
<c- p>});</c->
</pre>
   <h2 class="heading settled" data-level="9" id="security-considerations"><span class="secno">9. </span><span class="content">Security Considerations</span><a class="self-link" href="#security-considerations"></a></h2>
   <p>There are no known security issues introduced by these features.</p>
   <h2 class="heading settled" data-level="10" id="privacy-considerations"><span class="secno">10. </span><span class="content">Privacy Considerations</span><a class="self-link" href="#privacy-considerations"></a></h2>
   <ul>
    <li data-md>
     <p>The timing of paint callbacks can be used as a high-bandwidth channel for detecting "visited" state for links.
(<a href="https://github.com/w3c/css-houdini-drafts/issues/791">details</a>)
This is not a fundamentally new privacy leak,
as visited state leaks from many interactions,
but absent any further mitigations,
this is a particularly high-bandwidth channel of the information.</p>
     <p>No official mitigations are planned at this time,
as this privacy leak needs to be addressed more directly
to fix all such channels.</p>
   </ul>
   <h2 class="heading settled" data-level="11" id="changes"><span class="secno">11. </span><span class="content">Changes</span><a class="self-link" href="#changes"></a></h2>
   <p>Changes since the <a href="https://www.w3.org/TR/2018/CR-css-paint-api-1-20180809/">9 August 2018 CR publication</a>:</p>
   <ul>
    <li data-md>
     <p>Filtered the list of input properties to a paint worklet to be only known or custom properties.</p>
    <li data-md>
     <p>Added alpha flag to <code class="idl"><a data-link-type="idl" href="#paintrenderingcontext2d" id="ref-for-paintrenderingcontext2d①⑨">PaintRenderingContext2D</a></code> to control whether the rendering surface is forced opaque or allows transparency.</p>
    <li data-md>
     <p>Fix definition for the size of the output bitmap:</p>
     <blockquote>
      <p>
       The size of the output bitmap is the 
       <ins>concrete object size of the object it is rendering to</ins>
       <del>size of the fragment it is rendering</del>
       .
      </p>
     </blockquote>
   </ul>
  </main>
  <h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> Conformance</span><a class="self-link" href="#conformance"></a></h2>
  <h3 class="no-ref heading settled" id="conventions"><span class="content"> Document conventions</span><a class="self-link" href="#conventions"></a></h3>
  <p>Conformance requirements are expressed with a combination of
    descriptive assertions and RFC 2119 terminology. The key words “MUST”,
    “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
    “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
    document are to be interpreted as described in RFC 2119.
    However, for readability, these words do not appear in all uppercase
    letters in this specification. </p>
  <p>All of the text of this specification is normative except sections
    explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a></p>
  <p>Examples in this specification are introduced with the words “for example”
    or are set apart from the normative text with <code>class="example"</code>,
    like this: </p>
  <div class="example" id="example-ae2b6bc0">
   <a class="self-link" href="#example-ae2b6bc0"></a> 
   <p>This is an example of an informative example.</p>
  </div>
  <p>Informative notes begin with the word “Note” and are set apart from the
    normative text with <code>class="note"</code>, like this: </p>
  <p class="note" role="note">Note, this is an informative note.</p>
  <p>Advisements are normative sections styled to evoke special attention and are
    set apart from other normative text with <code>&lt;strong class="advisement"></code>, like
    this: <strong class="advisement"> UAs MUST provide an accessible alternative. </strong> </p>
  <h3 class="no-ref heading settled" id="conformance-classes"><span class="content"> Conformance classes</span><a class="self-link" href="#conformance-classes"></a></h3>
  <p>Conformance to this specification
    is defined for three conformance classes: </p>
  <dl>
   <dt>style sheet 
   <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
            style sheet</a>. 
   <dt>renderer 
   <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that interprets the semantics of a style sheet and renders
            documents that use them. 
   <dt>authoring tool 
   <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that writes a style sheet. 
  </dl>
  <p>A style sheet is conformant to this specification
    if all of its statements that use syntax defined in this module are valid
    according to the generic CSS grammar and the individual grammars of each
    feature defined in this module. </p>
  <p>A renderer is conformant to this specification
    if, in addition to interpreting the style sheet as defined by the
    appropriate specifications, it supports all the features defined
    by this specification by parsing them correctly
    and rendering the document accordingly. However, the inability of a
    UA to correctly render a document due to limitations of the device
    does not make the UA non-conformant. (For example, a UA is not
    required to render color on a monochrome monitor.) </p>
  <p>An authoring tool is conformant to this specification
    if it writes style sheets that are syntactically correct according to the
    generic CSS grammar and the individual grammars of each feature in
    this module, and meet all other conformance requirements of style sheets
    as described in this module. </p>
  <h3 class="no-ref heading settled" id="partial"><span class="content"> Partial implementations</span><a class="self-link" href="#partial"></a></h3>
  <p>So that authors can exploit the forward-compatible parsing rules to
    assign fallback values, CSS renderers <strong>must</strong> treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore
    as appropriate</a>) any at-rules, properties, property values, keywords,
    and other syntactic constructs for which they have no usable level of
    support. In particular, user agents <strong>must not</strong> selectively
    ignore unsupported component values and honor supported values in a single
    multi-value property declaration: if any value is considered invalid
    (as unsupported values must be), CSS requires that the entire declaration
    be ignored.</p>
  <h4 class="heading settled" id="conform-future-proofing"><span class="content"> Implementations of Unstable and Proprietary Features</span><a class="self-link" href="#conform-future-proofing"></a></h4>
  <p>To avoid clashes with future stable CSS features,
        the CSSWG recommends <a href="http://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="http://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="http://www.w3.org/TR/CSS/#proprietary-extension">proprietary extensions</a> to CSS. </p>
  <h3 class="no-ref heading settled" id="testing"><span class="content"> Non-experimental implementations</span><a class="self-link" href="#testing"></a></h3>
  <p>Once a specification reaches the Candidate Recommendation stage,
    non-experimental implementations are possible, and implementors should
    release an unprefixed implementation of any CR-level feature they
    can demonstrate to be correctly implemented according to spec. </p>
  <p>To establish and maintain the interoperability of CSS across
    implementations, the CSS Working Group requests that non-experimental
    CSS renderers submit an implementation report (and, if necessary, the
    testcases used for that implementation report) to the W3C before
    releasing an unprefixed implementation of any CSS features. Testcases
    submitted to W3C are subject to review and correction by the CSS
    Working Group. </p>
  <p>
   Further information on submitting testcases and implementation reports
    can be found from on the CSS Working Group’s website at <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
    Questions should be directed to the <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> mailing list. 
<script src="https://www.w3.org/scripts/TR/2016/fixup.js"></script>
  </p>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li>
    alpha
    <ul>
     <li><a href="#paintrenderingcontext2d-alpha">dfn for PaintRenderingContext2D</a><span>, in §6</span>
     <li><a href="#dom-paintrenderingcontext2dsettings-alpha">dict-member for PaintRenderingContext2DSettings</a><span>, in §2</span>
    </ul>
   <li><a href="#paint-definition-class-constructor">class constructor</a><span>, in §3</span>
   <li><a href="#paint-definition-constructor-valid-flag">constructor valid flag</a><span>, in §3</span>
   <li><a href="#create-a-paintrenderingcontext2d-object">create a PaintRenderingContext2D object</a><span>, in §6</span>
   <li><a href="#dom-paintworkletglobalscope-devicepixelratio">devicePixelRatio</a><span>, in §2</span>
   <li><a href="#document-paint-definition">document paint definition</a><span>, in §3</span>
   <li><a href="#document-paint-definitions">document paint definitions</a><span>, in §4</span>
   <li><a href="#draw-a-paint-image">draw a paint image</a><span>, in §7</span>
   <li><a href="#dom-paintsize-height">height</a><span>, in §7</span>
   <li><a href="#document-paint-definition-input-argument-syntaxes">input argument syntaxes</a><span>, in §3</span>
   <li>
    input properties
    <ul>
     <li><a href="#document-paint-definition-input-properties">dfn for document paint definition</a><span>, in §3</span>
     <li><a href="#paint-definition-input-properties">dfn for paint definition</a><span>, in §3</span>
    </ul>
   <li><a href="#invoke-a-paint-callback">invoke a paint callback</a><span>, in §7</span>
   <li><a href="#paintrenderingcontext2d-output-bitmap">output bitmap</a><span>, in §6</span>
   <li><a href="#funcdef-paint">paint()</a><span>, in §5</span>
   <li><a href="#paint-class-instances">paint class instances</a><span>, in §4</span>
   <li><a href="#paint-definition">paint definition</a><span>, in §3</span>
   <li><a href="#paint-definitions">paint definitions</a><span>, in §4</span>
   <li><a href="#paint-definition-paint-function">paint function</a><span>, in §3</span>
   <li><a href="#paintrenderingcontext2d">PaintRenderingContext2D</a><span>, in §6</span>
   <li><a href="#dictdef-paintrenderingcontext2dsettings">PaintRenderingContext2DSettings</a><span>, in §2</span>
   <li>
    PaintRenderingContext2DSettings object
    <ul>
     <li><a href="#document-paint-definition-paintrenderingcontext2dsettings-object">dfn for document paint definition</a><span>, in §3</span>
     <li><a href="#paint-definition-paintrenderingcontext2dsettings-object">dfn for paint definition</a><span>, in §3</span>
    </ul>
   <li><a href="#paintsize">PaintSize</a><span>, in §7</span>
   <li><a href="#dom-css-paintworklet">paintWorklet</a><span>, in §2</span>
   <li><a href="#paintworkletglobalscope">PaintWorkletGlobalScope</a><span>, in §2</span>
   <li><a href="#dom-paintworkletglobalscope-registerpaint">registerPaint(name, paintCtor)</a><span>, in §4</span>
   <li><a href="#dom-paintsize-width">width</a><span>, in §7</span>
  </ul>
  <aside class="dfn-panel" data-for="term-for-propdef-border-image">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-image">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-image</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-image">8.5. Example 5: Drawing outside an element’s area</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-computed-value">
   <a href="https://drafts.csswg.org/css-cascade-4/#computed-value">https://drafts.csswg.org/css-cascade-4/#computed-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-computed-value">5. Paint Notation</a>
    <li><a href="#ref-for-computed-value①">7. Drawing an image</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-box">
   <a href="https://drafts.csswg.org/css-display-3/#box">https://drafts.csswg.org/css-display-3/#box</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-box">7. Drawing an image</a> <a href="#ref-for-box①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-invalid-image">
   <a href="https://drafts.csswg.org/css-images-4/#invalid-image">https://drafts.csswg.org/css-images-4/#invalid-image</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-invalid-image">5. Paint Notation</a> <a href="#ref-for-invalid-image①">(2)</a>
    <li><a href="#ref-for-invalid-image②">7. Drawing an image</a> <a href="#ref-for-invalid-image③">(2)</a> <a href="#ref-for-invalid-image④">(3)</a> <a href="#ref-for-invalid-image⑤">(4)</a> <a href="#ref-for-invalid-image⑥">(5)</a> <a href="#ref-for-invalid-image⑦">(6)</a> <a href="#ref-for-invalid-image⑧">(7)</a> <a href="#ref-for-invalid-image⑨">(8)</a> <a href="#ref-for-invalid-image①⓪">(9)</a> <a href="#ref-for-invalid-image①①">(10)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-declaration-value">
   <a href="https://drafts.csswg.org/css-syntax-3/#typedef-declaration-value">https://drafts.csswg.org/css-syntax-3/#typedef-declaration-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-declaration-value">5. Paint Notation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-function">
   <a href="https://drafts.csswg.org/css-syntax-3/#function">https://drafts.csswg.org/css-syntax-3/#function</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-function">3. Concepts</a>
    <li><a href="#ref-for-function①">4. Registering Custom Paint</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-cssimagevalue">
   <a href="https://drafts.css-houdini.org/css-typed-om-1/#cssimagevalue">https://drafts.css-houdini.org/css-typed-om-1/#cssimagevalue</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-cssimagevalue">6.1. Drawing a CSSImageValue</a> <a href="#ref-for-cssimagevalue①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-stylepropertymap">
   <a href="https://drafts.css-houdini.org/css-typed-om-1/#stylepropertymap">https://drafts.css-houdini.org/css-typed-om-1/#stylepropertymap</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-stylepropertymap">4. Registering Custom Paint</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-stylepropertymapreadonly">
   <a href="https://drafts.css-houdini.org/css-typed-om-1/#stylepropertymapreadonly">https://drafts.css-houdini.org/css-typed-om-1/#stylepropertymapreadonly</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-stylepropertymapreadonly">7. Drawing an image</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-cursor">
   <a href="https://drafts.csswg.org/css-ui-4/#propdef-cursor">https://drafts.csswg.org/css-ui-4/#propdef-cursor</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-cursor">5. Paint Notation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-comb-comma">
   <a href="https://drafts.csswg.org/css-values-4/#comb-comma">https://drafts.csswg.org/css-values-4/#comb-comma</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-comb-comma">5. Paint Notation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-ident">
   <a href="https://drafts.csswg.org/css-values-4/#typedef-ident">https://drafts.csswg.org/css-values-4/#typedef-ident</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-ident">5. Paint Notation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-mult-opt">
   <a href="https://drafts.csswg.org/css-values-4/#mult-opt">https://drafts.csswg.org/css-values-4/#mult-opt</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mult-opt">5. Paint Notation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-custom-property">
   <a href="https://drafts.csswg.org/css-variables-1/#custom-property">https://drafts.csswg.org/css-variables-1/#custom-property</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-custom-property">4. Registering Custom Paint</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-image">
   <a href="https://drafts.csswg.org/css-images-3/#typedef-image">https://drafts.csswg.org/css-images-3/#typedef-image</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-image①">1. Introduction</a>
    <li><a href="#ref-for-typedef-image②">3. Concepts</a> <a href="#ref-for-typedef-image③">(2)</a>
    <li><a href="#ref-for-typedef-image④">5. Paint Notation</a> <a href="#ref-for-typedef-image⑤">(2)</a>
    <li><a href="#ref-for-typedef-image⑥">7. Drawing an image</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concrete-object-size">
   <a href="https://drafts.csswg.org/css-images-3/#concrete-object-size">https://drafts.csswg.org/css-images-3/#concrete-object-size</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concrete-object-size">6. The 2D rendering context</a>
    <li><a href="#ref-for-concrete-object-size①">7. Drawing an image</a> <a href="#ref-for-concrete-object-size②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-intrinsic-dimensions">
   <a href="https://drafts.csswg.org/css-images-3/#intrinsic-dimensions">https://drafts.csswg.org/css-images-3/#intrinsic-dimensions</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-intrinsic-dimensions">7. Drawing an image</a> <a href="#ref-for-intrinsic-dimensions①">(2)</a> <a href="#ref-for-intrinsic-dimensions②">(3)</a> <a href="#ref-for-intrinsic-dimensions③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-object-size-negotiation">
   <a href="https://drafts.csswg.org/css-images-3/#object-size-negotiation">https://drafts.csswg.org/css-images-3/#object-size-negotiation</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-object-size-negotiation">7. Drawing an image</a> <a href="#ref-for-object-size-negotiation①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-namespacedef-css">
   <a href="https://drafts.csswg.org/cssom-1/#namespacedef-css">https://drafts.csswg.org/cssom-1/#namespacedef-css</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-namespacedef-css">2. Paint Worklet</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-supported-css-property">
   <a href="https://drafts.csswg.org/cssom-1/#supported-css-property">https://drafts.csswg.org/cssom-1/#supported-css-property</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-supported-css-property">4. Registering Custom Paint</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-window-devicepixelratio">
   <a href="https://drafts.csswg.org/cssom-view-1/#dom-window-devicepixelratio">https://drafts.csswg.org/cssom-view-1/#dom-window-devicepixelratio</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-window-devicepixelratio">2. Paint Worklet</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-document">
   <a href="https://dom.spec.whatwg.org/#concept-document">https://dom.spec.whatwg.org/#concept-document</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-document">3. Concepts</a>
    <li><a href="#ref-for-concept-document①">4. Registering Custom Paint</a> <a href="#ref-for-concept-document②">(2)</a>
    <li><a href="#ref-for-concept-document③">7. Drawing an image</a> <a href="#ref-for-concept-document④">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-canvascompositing">
   <a href="https://html.spec.whatwg.org/multipage/canvas.html#canvascompositing">https://html.spec.whatwg.org/multipage/canvas.html#canvascompositing</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-canvascompositing">6. The 2D rendering context</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-canvasdrawimage">
   <a href="https://html.spec.whatwg.org/multipage/canvas.html#canvasdrawimage">https://html.spec.whatwg.org/multipage/canvas.html#canvasdrawimage</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-canvasdrawimage">6. The 2D rendering context</a>
    <li><a href="#ref-for-canvasdrawimage①">6.1. Drawing a CSSImageValue</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-canvasdrawpath">
   <a href="https://html.spec.whatwg.org/multipage/canvas.html#canvasdrawpath">https://html.spec.whatwg.org/multipage/canvas.html#canvasdrawpath</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-canvasdrawpath">6. The 2D rendering context</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-canvasfillstrokestyles">
   <a href="https://html.spec.whatwg.org/multipage/canvas.html#canvasfillstrokestyles">https://html.spec.whatwg.org/multipage/canvas.html#canvasfillstrokestyles</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-canvasfillstrokestyles">6. The 2D rendering context</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-canvasimagedata">
   <a href="https://html.spec.whatwg.org/multipage/canvas.html#canvasimagedata">https://html.spec.whatwg.org/multipage/canvas.html#canvasimagedata</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-canvasimagedata">6. The 2D rendering context</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-canvasimagesmoothing">
   <a href="https://html.spec.whatwg.org/multipage/canvas.html#canvasimagesmoothing">https://html.spec.whatwg.org/multipage/canvas.html#canvasimagesmoothing</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-canvasimagesmoothing">6. The 2D rendering context</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-canvasimagesource">
   <a href="https://html.spec.whatwg.org/multipage/canvas.html#canvasimagesource">https://html.spec.whatwg.org/multipage/canvas.html#canvasimagesource</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-canvasimagesource">6.1. Drawing a CSSImageValue</a> <a href="#ref-for-canvasimagesource①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-canvaspath">
   <a href="https://html.spec.whatwg.org/multipage/canvas.html#canvaspath">https://html.spec.whatwg.org/multipage/canvas.html#canvaspath</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-canvaspath">6. The 2D rendering context</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-canvaspathdrawingstyles">
   <a href="https://html.spec.whatwg.org/multipage/canvas.html#canvaspathdrawingstyles">https://html.spec.whatwg.org/multipage/canvas.html#canvaspathdrawingstyles</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-canvaspathdrawingstyles">6. The 2D rendering context</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-canvasrect">
   <a href="https://html.spec.whatwg.org/multipage/canvas.html#canvasrect">https://html.spec.whatwg.org/multipage/canvas.html#canvasrect</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-canvasrect">6. The 2D rendering context</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-canvasrenderingcontext2d">
   <a href="https://html.spec.whatwg.org/multipage/canvas.html#canvasrenderingcontext2d">https://html.spec.whatwg.org/multipage/canvas.html#canvasrenderingcontext2d</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-canvasrenderingcontext2d">6. The 2D rendering context</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-canvasshadowstyles">
   <a href="https://html.spec.whatwg.org/multipage/canvas.html#canvasshadowstyles">https://html.spec.whatwg.org/multipage/canvas.html#canvasshadowstyles</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-canvasshadowstyles">6. The 2D rendering context</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-canvasstate">
   <a href="https://html.spec.whatwg.org/multipage/canvas.html#canvasstate">https://html.spec.whatwg.org/multipage/canvas.html#canvasstate</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-canvasstate">6. The 2D rendering context</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-canvastext">
   <a href="https://html.spec.whatwg.org/multipage/canvas.html#canvastext">https://html.spec.whatwg.org/multipage/canvas.html#canvastext</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-canvastext">6. The 2D rendering context</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-canvastextdrawingstyles">
   <a href="https://html.spec.whatwg.org/multipage/canvas.html#canvastextdrawingstyles">https://html.spec.whatwg.org/multipage/canvas.html#canvastextdrawingstyles</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-canvastextdrawingstyles">6. The 2D rendering context</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-canvastransform">
   <a href="https://html.spec.whatwg.org/multipage/canvas.html#canvastransform">https://html.spec.whatwg.org/multipage/canvas.html#canvastransform</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-canvastransform">6. The 2D rendering context</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-canvasuserinterface">
   <a href="https://html.spec.whatwg.org/multipage/canvas.html#canvasuserinterface">https://html.spec.whatwg.org/multipage/canvas.html#canvasuserinterface</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-canvasuserinterface">6. The 2D rendering context</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-context-2d-drawimage">
   <a href="https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-drawimage">https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-drawimage</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-context-2d-drawimage">6.1. Drawing a CSSImageValue</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-in-parallel">
   <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#in-parallel">https://html.spec.whatwg.org/multipage/infrastructure.html#in-parallel</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-in-parallel">7. Drawing an image</a> <a href="#ref-for-in-parallel①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-queue-a-task">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task">https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-queue-a-task">4. Registering Custom Paint</a>
    <li><a href="#ref-for-queue-a-task①">7. Drawing an image</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-reset-the-rendering-context-to-its-default-state">
   <a href="https://html.spec.whatwg.org/multipage/canvas.html#reset-the-rendering-context-to-its-default-state">https://html.spec.whatwg.org/multipage/canvas.html#reset-the-rendering-context-to-its-default-state</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-reset-the-rendering-context-to-its-default-state">6. The 2D rendering context</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-canvas-set-bitmap-dimensions">
   <a href="https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-set-bitmap-dimensions">https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-set-bitmap-dimensions</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-canvas-set-bitmap-dimensions">6. The 2D rendering context</a> <a href="#ref-for-concept-canvas-set-bitmap-dimensions①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-list-append">
   <a href="https://infra.spec.whatwg.org/#list-append">https://infra.spec.whatwg.org/#list-append</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-list-append">4. Registering Custom Paint</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-list-empty">
   <a href="https://infra.spec.whatwg.org/#list-empty">https://infra.spec.whatwg.org/#list-empty</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-list-empty">4. Registering Custom Paint</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-map-exists">
   <a href="https://infra.spec.whatwg.org/#map-exists">https://infra.spec.whatwg.org/#map-exists</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-map-exists">4. Registering Custom Paint</a> <a href="#ref-for-map-exists①">(2)</a>
    <li><a href="#ref-for-map-exists②">7. Drawing an image</a> <a href="#ref-for-map-exists③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-list-iterate">
   <a href="https://infra.spec.whatwg.org/#list-iterate">https://infra.spec.whatwg.org/#list-iterate</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-list-iterate">4. Registering Custom Paint</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-map-get">
   <a href="https://infra.spec.whatwg.org/#map-get">https://infra.spec.whatwg.org/#map-get</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-map-get">4. Registering Custom Paint</a>
    <li><a href="#ref-for-map-get①">7. Drawing an image</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-list">
   <a href="https://infra.spec.whatwg.org/#list">https://infra.spec.whatwg.org/#list</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-list">3. Concepts</a> <a href="#ref-for-list①">(2)</a> <a href="#ref-for-list②">(3)</a>
    <li><a href="#ref-for-list③">4. Registering Custom Paint</a>
    <li><a href="#ref-for-list④">7. Drawing an image</a>
    <li><a href="#ref-for-list⑤">7.1. Global Scope Selection</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-ordered-map">
   <a href="https://infra.spec.whatwg.org/#ordered-map">https://infra.spec.whatwg.org/#ordered-map</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-ordered-map">4. Registering Custom Paint</a> <a href="#ref-for-ordered-map①">(2)</a> <a href="#ref-for-ordered-map②">(3)</a> <a href="#ref-for-ordered-map③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-map-set">
   <a href="https://infra.spec.whatwg.org/#map-set">https://infra.spec.whatwg.org/#map-set</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-map-set">4. Registering Custom Paint</a> <a href="#ref-for-map-set①">(2)</a> <a href="#ref-for-map-set②">(3)</a>
    <li><a href="#ref-for-map-set③">7. Drawing an image</a> <a href="#ref-for-map-set④">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-struct">
   <a href="https://infra.spec.whatwg.org/#struct">https://infra.spec.whatwg.org/#struct</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-struct">3. Concepts</a> <a href="#ref-for-struct①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-DOMException">
   <a href="https://heycam.github.io/webidl/#idl-DOMException">https://heycam.github.io/webidl/#idl-DOMException</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-DOMException">4. Registering Custom Paint</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-DOMString">
   <a href="https://heycam.github.io/webidl/#idl-DOMString">https://heycam.github.io/webidl/#idl-DOMString</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-DOMString">2. Paint Worklet</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-Exposed">
   <a href="https://heycam.github.io/webidl/#Exposed">https://heycam.github.io/webidl/#Exposed</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-Exposed">2. Paint Worklet</a>
    <li><a href="#ref-for-Exposed①">6. The 2D rendering context</a>
    <li><a href="#ref-for-Exposed②">7. Drawing an image</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-Global">
   <a href="https://heycam.github.io/webidl/#Global">https://heycam.github.io/webidl/#Global</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-Global">2. Paint Worklet</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-invalidmodificationerror">
   <a href="https://heycam.github.io/webidl/#invalidmodificationerror">https://heycam.github.io/webidl/#invalidmodificationerror</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-invalidmodificationerror">4. Registering Custom Paint</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-SameObject">
   <a href="https://heycam.github.io/webidl/#SameObject">https://heycam.github.io/webidl/#SameObject</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-SameObject">2. Paint Worklet</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-VoidFunction">
   <a href="https://heycam.github.io/webidl/#VoidFunction">https://heycam.github.io/webidl/#VoidFunction</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-VoidFunction">2. Paint Worklet</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-boolean">
   <a href="https://heycam.github.io/webidl/#idl-boolean">https://heycam.github.io/webidl/#idl-boolean</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-boolean">2. Paint Worklet</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dfn-callback-function">
   <a href="https://heycam.github.io/webidl/#dfn-callback-function">https://heycam.github.io/webidl/#dfn-callback-function</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dfn-callback-function">3. Concepts</a>
    <li><a href="#ref-for-dfn-callback-function①">4. Registering Custom Paint</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dfn-callback-this-value">
   <a href="https://heycam.github.io/webidl/#dfn-callback-this-value">https://heycam.github.io/webidl/#dfn-callback-this-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dfn-callback-this-value">7. Drawing an image</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-web-idl-arguments-list-converting">
   <a href="https://heycam.github.io/webidl/#web-idl-arguments-list-converting">https://heycam.github.io/webidl/#web-idl-arguments-list-converting</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-web-idl-arguments-list-converting">4. Registering Custom Paint</a> <a href="#ref-for-web-idl-arguments-list-converting①">(2)</a> <a href="#ref-for-web-idl-arguments-list-converting②">(3)</a> <a href="#ref-for-web-idl-arguments-list-converting③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-double">
   <a href="https://heycam.github.io/webidl/#idl-double">https://heycam.github.io/webidl/#idl-double</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-double">7. Drawing an image</a> <a href="#ref-for-idl-double①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-invoke-a-callback-function">
   <a href="https://heycam.github.io/webidl/#invoke-a-callback-function">https://heycam.github.io/webidl/#invoke-a-callback-function</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-invoke-a-callback-function">7. Drawing an image</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dfn-throw">
   <a href="https://heycam.github.io/webidl/#dfn-throw">https://heycam.github.io/webidl/#dfn-throw</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dfn-throw">4. Registering Custom Paint</a> <a href="#ref-for-dfn-throw①">(2)</a> <a href="#ref-for-dfn-throw②">(3)</a> <a href="#ref-for-dfn-throw③">(4)</a> <a href="#ref-for-dfn-throw④">(5)</a> <a href="#ref-for-dfn-throw⑤">(6)</a> <a href="#ref-for-dfn-throw⑥">(7)</a>
    <li><a href="#ref-for-dfn-throw⑦">7. Drawing an image</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-unrestricted-double">
   <a href="https://heycam.github.io/webidl/#idl-unrestricted-double">https://heycam.github.io/webidl/#idl-unrestricted-double</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-unrestricted-double">2. Paint Worklet</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-worklet">
   <a href="https://drafts.css-houdini.org/worklets/#worklet">https://drafts.css-houdini.org/worklets/#worklet</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-worklet">2. Paint Worklet</a> <a href="#ref-for-worklet①">(2)</a> <a href="#ref-for-worklet②">(3)</a>
    <li><a href="#ref-for-worklet③">7. Drawing an image</a> <a href="#ref-for-worklet④">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-workletglobalscope">
   <a href="https://drafts.css-houdini.org/worklets/#workletglobalscope">https://drafts.css-houdini.org/worklets/#workletglobalscope</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-workletglobalscope">2. Paint Worklet</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-create-a-workletglobalscope">
   <a href="https://drafts.css-houdini.org/worklets/#create-a-workletglobalscope">https://drafts.css-houdini.org/worklets/#create-a-workletglobalscope</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-create-a-workletglobalscope">7. Drawing an image</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-worklet-global-scope-type">
   <a href="https://drafts.css-houdini.org/worklets/#worklet-global-scope-type">https://drafts.css-houdini.org/worklets/#worklet-global-scope-type</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-worklet-global-scope-type">2. Paint Worklet</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-worklets-workletglobalscopes">
   <a href="https://drafts.css-houdini.org/worklets/#worklets-workletglobalscopes">https://drafts.css-houdini.org/worklets/#worklets-workletglobalscopes</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-worklets-workletglobalscopes">7. Drawing an image</a>
    <li><a href="#ref-for-worklets-workletglobalscopes①">7.1. Global Scope Selection</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[css-backgrounds-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-border-image" style="color:initial">border-image</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-cascade-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-computed-value" style="color:initial">computed value</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-display-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-box" style="color:initial">box</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-images-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-invalid-image" style="color:initial">invalid image</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-syntax-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-typedef-declaration-value" style="color:initial">&lt;declaration-value></span>
     <li><span class="dfn-paneled" id="term-for-function" style="color:initial">function</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-typed-om-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-cssimagevalue" style="color:initial">CSSImageValue</span>
     <li><span class="dfn-paneled" id="term-for-stylepropertymap" style="color:initial">StylePropertyMap</span>
     <li><span class="dfn-paneled" id="term-for-stylepropertymapreadonly" style="color:initial">StylePropertyMapReadOnly</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-ui-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-cursor" style="color:initial">cursor</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-values-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-comb-comma" style="color:initial">,</span>
     <li><span class="dfn-paneled" id="term-for-typedef-ident" style="color:initial">&lt;ident></span>
     <li><span class="dfn-paneled" id="term-for-mult-opt" style="color:initial">?</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-variables-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-custom-property" style="color:initial">custom property</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css3-images]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-typedef-image" style="color:initial">&lt;image></span>
     <li><span class="dfn-paneled" id="term-for-concrete-object-size" style="color:initial">concrete object size</span>
     <li><span class="dfn-paneled" id="term-for-intrinsic-dimensions" style="color:initial">intrinsic dimensions</span>
     <li><span class="dfn-paneled" id="term-for-object-size-negotiation" style="color:initial">object size negotiation</span>
    </ul>
   <li>
    <a data-link-type="biblio">[cssom-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-namespacedef-css" style="color:initial">CSS</span>
     <li><span class="dfn-paneled" id="term-for-supported-css-property" style="color:initial">supported css property</span>
    </ul>
   <li>
    <a data-link-type="biblio">[cssom-view-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-dom-window-devicepixelratio" style="color:initial">devicePixelRatio</span>
    </ul>
   <li>
    <a data-link-type="biblio">[DOM]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-concept-document" style="color:initial">document</span>
    </ul>
   <li>
    <a data-link-type="biblio">[HTML]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-canvascompositing" style="color:initial">CanvasCompositing</span>
     <li><span class="dfn-paneled" id="term-for-canvasdrawimage" style="color:initial">CanvasDrawImage</span>
     <li><span class="dfn-paneled" id="term-for-canvasdrawpath" style="color:initial">CanvasDrawPath</span>
     <li><span class="dfn-paneled" id="term-for-canvasfillstrokestyles" style="color:initial">CanvasFillStrokeStyles</span>
     <li><span class="dfn-paneled" id="term-for-canvasimagedata" style="color:initial">CanvasImageData</span>
     <li><span class="dfn-paneled" id="term-for-canvasimagesmoothing" style="color:initial">CanvasImageSmoothing</span>
     <li><span class="dfn-paneled" id="term-for-canvasimagesource" style="color:initial">CanvasImageSource</span>
     <li><span class="dfn-paneled" id="term-for-canvaspath" style="color:initial">CanvasPath</span>
     <li><span class="dfn-paneled" id="term-for-canvaspathdrawingstyles" style="color:initial">CanvasPathDrawingStyles</span>
     <li><span class="dfn-paneled" id="term-for-canvasrect" style="color:initial">CanvasRect</span>
     <li><span class="dfn-paneled" id="term-for-canvasrenderingcontext2d" style="color:initial">CanvasRenderingContext2D</span>
     <li><span class="dfn-paneled" id="term-for-canvasshadowstyles" style="color:initial">CanvasShadowStyles</span>
     <li><span class="dfn-paneled" id="term-for-canvasstate" style="color:initial">CanvasState</span>
     <li><span class="dfn-paneled" id="term-for-canvastext" style="color:initial">CanvasText</span>
     <li><span class="dfn-paneled" id="term-for-canvastextdrawingstyles" style="color:initial">CanvasTextDrawingStyles</span>
     <li><span class="dfn-paneled" id="term-for-canvastransform" style="color:initial">CanvasTransform</span>
     <li><span class="dfn-paneled" id="term-for-canvasuserinterface" style="color:initial">CanvasUserInterface</span>
     <li><span class="dfn-paneled" id="term-for-dom-context-2d-drawimage" style="color:initial">drawImage</span>
     <li><span class="dfn-paneled" id="term-for-in-parallel" style="color:initial">in parallel</span>
     <li><span class="dfn-paneled" id="term-for-queue-a-task" style="color:initial">queue a task</span>
     <li><span class="dfn-paneled" id="term-for-reset-the-rendering-context-to-its-default-state" style="color:initial">reset the rendering context to its default state</span>
     <li><span class="dfn-paneled" id="term-for-concept-canvas-set-bitmap-dimensions" style="color:initial">set bitmap dimensions</span>
    </ul>
   <li>
    <a data-link-type="biblio">[INFRA]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-list-append" style="color:initial">append</span>
     <li><span class="dfn-paneled" id="term-for-list-empty" style="color:initial">empty</span>
     <li><span class="dfn-paneled" id="term-for-map-exists" style="color:initial">exist</span>
     <li><span class="dfn-paneled" id="term-for-list-iterate" style="color:initial">for each</span>
     <li><span class="dfn-paneled" id="term-for-map-get" style="color:initial">get</span>
     <li><span class="dfn-paneled" id="term-for-list" style="color:initial">list</span>
     <li><span class="dfn-paneled" id="term-for-ordered-map" style="color:initial">map</span>
     <li><span class="dfn-paneled" id="term-for-map-set" style="color:initial">set</span>
     <li><span class="dfn-paneled" id="term-for-struct" style="color:initial">struct</span>
    </ul>
   <li>
    <a data-link-type="biblio">[WebIDL]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-idl-DOMException" style="color:initial">DOMException</span>
     <li><span class="dfn-paneled" id="term-for-idl-DOMString" style="color:initial">DOMString</span>
     <li><span class="dfn-paneled" id="term-for-Exposed" style="color:initial">Exposed</span>
     <li><span class="dfn-paneled" id="term-for-Global" style="color:initial">Global</span>
     <li><span class="dfn-paneled" id="term-for-invalidmodificationerror" style="color:initial">InvalidModificationError</span>
     <li><span class="dfn-paneled" id="term-for-SameObject" style="color:initial">SameObject</span>
     <li><span class="dfn-paneled" id="term-for-VoidFunction" style="color:initial">VoidFunction</span>
     <li><span class="dfn-paneled" id="term-for-idl-boolean" style="color:initial">boolean</span>
     <li><span class="dfn-paneled" id="term-for-dfn-callback-function" style="color:initial">callback function</span>
     <li><span class="dfn-paneled" id="term-for-dfn-callback-this-value" style="color:initial">callback this value</span>
     <li><span class="dfn-paneled" id="term-for-web-idl-arguments-list-converting" style="color:initial">converting</span>
     <li><span class="dfn-paneled" id="term-for-idl-double" style="color:initial">double</span>
     <li><span class="dfn-paneled" id="term-for-invoke-a-callback-function" style="color:initial">invoke</span>
     <li><span class="dfn-paneled" id="term-for-dfn-throw" style="color:initial">throw</span>
     <li><span class="dfn-paneled" id="term-for-idl-unrestricted-double" style="color:initial">unrestricted double</span>
    </ul>
   <li>
    <a data-link-type="biblio">[worklets-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-worklet" style="color:initial">Worklet</span>
     <li><span class="dfn-paneled" id="term-for-workletglobalscope" style="color:initial">WorkletGlobalScope</span>
     <li><span class="dfn-paneled" id="term-for-create-a-workletglobalscope" style="color:initial">create a workletglobalscope</span>
     <li><span class="dfn-paneled" id="term-for-worklet-global-scope-type" style="color:initial">worklet global scope type</span>
     <li><span class="dfn-paneled" id="term-for-worklets-workletglobalscopes" style="color:initial">worklet's workletglobalscopes</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-css-backgrounds-3">[CSS-BACKGROUNDS-3]
   <dd>Bert Bos; Elika Etemad; Brad Kemper. <a href="https://www.w3.org/TR/css-backgrounds-3/">CSS Backgrounds and Borders Module Level 3</a>. 17 October 2017. CR. URL: <a href="https://www.w3.org/TR/css-backgrounds-3/">https://www.w3.org/TR/css-backgrounds-3/</a>
   <dt id="biblio-css-cascade-4">[CSS-CASCADE-4]
   <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-cascade-4/">CSS Cascading and Inheritance Level 4</a>. 28 August 2018. CR. URL: <a href="https://www.w3.org/TR/css-cascade-4/">https://www.w3.org/TR/css-cascade-4/</a>
   <dt id="biblio-css-display-3">[CSS-DISPLAY-3]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-display-3/">CSS Display Module Level 3</a>. 28 August 2018. CR. URL: <a href="https://www.w3.org/TR/css-display-3/">https://www.w3.org/TR/css-display-3/</a>
   <dt id="biblio-css-images-4">[CSS-IMAGES-4]
   <dd>Tab Atkins Jr.; Elika Etemad; Lea Verou. <a href="https://www.w3.org/TR/css-images-4/">CSS Image Values and Replaced Content Module Level 4</a>. 13 April 2017. WD. URL: <a href="https://www.w3.org/TR/css-images-4/">https://www.w3.org/TR/css-images-4/</a>
   <dt id="biblio-css-syntax-3">[CSS-SYNTAX-3]
   <dd>Tab Atkins Jr.; Simon Sapin. <a href="https://www.w3.org/TR/css-syntax-3/">CSS Syntax Module Level 3</a>. 20 February 2014. CR. URL: <a href="https://www.w3.org/TR/css-syntax-3/">https://www.w3.org/TR/css-syntax-3/</a>
   <dt id="biblio-css-typed-om-1">[CSS-TYPED-OM-1]
   <dd>Shane Stephens; Tab Atkins Jr.; Naina Raisinghani. <a href="https://www.w3.org/TR/css-typed-om-1/">CSS Typed OM Level 1</a>. 10 April 2018. WD. URL: <a href="https://www.w3.org/TR/css-typed-om-1/">https://www.w3.org/TR/css-typed-om-1/</a>
   <dt id="biblio-css-ui-4">[CSS-UI-4]
   <dd>Florian Rivoal. <a href="https://www.w3.org/TR/css-ui-4/">CSS Basic User Interface Module Level 4</a>. 22 December 2017. WD. URL: <a href="https://www.w3.org/TR/css-ui-4/">https://www.w3.org/TR/css-ui-4/</a>
   <dt id="biblio-css-values-4">[CSS-VALUES-4]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-4/">CSS Values and Units Module Level 4</a>. 31 January 2019. WD. URL: <a href="https://www.w3.org/TR/css-values-4/">https://www.w3.org/TR/css-values-4/</a>
   <dt id="biblio-css-variables-1">[CSS-VARIABLES-1]
   <dd>Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-variables-1/">CSS Custom Properties for Cascading Variables Module Level 1</a>. 3 December 2015. CR. URL: <a href="https://www.w3.org/TR/css-variables-1/">https://www.w3.org/TR/css-variables-1/</a>
   <dt id="biblio-css3-images">[CSS3-IMAGES]
   <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css3-images/">CSS Image Values and Replaced Content Module Level 3</a>. 17 April 2012. CR. URL: <a href="https://www.w3.org/TR/css3-images/">https://www.w3.org/TR/css3-images/</a>
   <dt id="biblio-cssom-1">[CSSOM-1]
   <dd>Simon Pieters; Glenn Adams. <a href="https://www.w3.org/TR/cssom-1/">CSS Object Model (CSSOM)</a>. 17 March 2016. WD. URL: <a href="https://www.w3.org/TR/cssom-1/">https://www.w3.org/TR/cssom-1/</a>
   <dt id="biblio-cssom-view-1">[CSSOM-VIEW-1]
   <dd>Simon Pieters. <a href="https://www.w3.org/TR/cssom-view-1/">CSSOM View Module</a>. 17 March 2016. WD. URL: <a href="https://www.w3.org/TR/cssom-view-1/">https://www.w3.org/TR/cssom-view-1/</a>
   <dt id="biblio-dom">[DOM]
   <dd>Anne van Kesteren. <a href="https://dom.spec.whatwg.org/">DOM Standard</a>. Living Standard. URL: <a href="https://dom.spec.whatwg.org/">https://dom.spec.whatwg.org/</a>
   <dt id="biblio-html">[HTML]
   <dd>Anne van Kesteren; et al. <a href="https://html.spec.whatwg.org/multipage/">HTML Standard</a>. Living Standard. URL: <a href="https://html.spec.whatwg.org/multipage/">https://html.spec.whatwg.org/multipage/</a>
   <dt id="biblio-infra">[INFRA]
   <dd>Anne van Kesteren; Domenic Denicola. <a href="https://infra.spec.whatwg.org/">Infra Standard</a>. Living Standard. URL: <a href="https://infra.spec.whatwg.org/">https://infra.spec.whatwg.org/</a>
   <dt id="biblio-rfc2119">[RFC2119]
   <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
   <dt id="biblio-webidl">[WebIDL]
   <dd>Boris Zbarsky. <a href="https://heycam.github.io/webidl/">Web IDL</a>. 15 December 2016. ED. URL: <a href="https://heycam.github.io/webidl/">https://heycam.github.io/webidl/</a>
   <dt id="biblio-worklets-1">[WORKLETS-1]
   <dd>Ian Kilpatrick. <a href="https://www.w3.org/TR/worklets-1/">Worklets Level 1</a>. 7 June 2016. WD. URL: <a href="https://www.w3.org/TR/worklets-1/">https://www.w3.org/TR/worklets-1/</a>
  </dl>
  <h2 class="no-num no-ref heading settled" id="idl-index"><span class="content">IDL Index</span><a class="self-link" href="#idl-index"></a></h2>
<pre class="idl highlight def"><c- b>partial</c-> <c- b>namespace</c-> <a class="idl-code" data-link-type="namespace" href="https://drafts.csswg.org/cssom-1/#namespacedef-css" id="ref-for-namespacedef-css①"><c- g>CSS</c-></a> {
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SameObject" id="ref-for-SameObject①"><c- g>SameObject</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://drafts.css-houdini.org/worklets/#worklet" id="ref-for-worklet①①"><c- n>Worklet</c-></a> <a data-readonly data-type="Worklet" href="#dom-css-paintworklet"><code><c- g>paintWorklet</c-></code></a>;
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Global" id="ref-for-Global①"><c- g>Global</c-></a>=(<a class="n" data-link-type="idl-name" href="https://drafts.css-houdini.org/worklets/#worklet" id="ref-for-worklet②①"><c- n>Worklet</c-></a>,<a class="n" data-link-type="idl-name"><c- n>PaintWorklet</c-></a>),<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed③"><c- g>Exposed</c-></a>=<c- n>PaintWorklet</c->]
<c- b>interface</c-> <a href="#paintworkletglobalscope"><code><c- g>PaintWorkletGlobalScope</c-></code></a> : <a class="n" data-link-type="idl-name" href="https://drafts.css-houdini.org/worklets/#workletglobalscope" id="ref-for-workletglobalscope①"><c- n>WorkletGlobalScope</c-></a> {
    <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-paintworkletglobalscope-registerpaint" id="ref-for-dom-paintworkletglobalscope-registerpaint⑤"><c- g>registerPaint</c-></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①"><c- b>DOMString</c-></a> <a href="#dom-paintworkletglobalscope-registerpaint-name-paintctor-name"><code><c- g>name</c-></code></a>, <a class="n" data-link-type="idl-name" href="https://heycam.github.io/webidl/#VoidFunction" id="ref-for-VoidFunction①"><c- n>VoidFunction</c-></a> <a href="#dom-paintworkletglobalscope-registerpaint-name-paintctor-paintctor"><code><c- g>paintCtor</c-></code></a>);
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a data-readonly data-type="unrestricted double" href="#dom-paintworkletglobalscope-devicepixelratio"><code><c- g>devicePixelRatio</c-></code></a>;
};

<c- b>dictionary</c-> <a href="#dictdef-paintrenderingcontext2dsettings"><code><c- g>PaintRenderingContext2DSettings</c-></code></a> {
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean①"><c- b>boolean</c-></a> <a data-default="true" data-type="boolean " href="#dom-paintrenderingcontext2dsettings-alpha"><code><c- g>alpha</c-></code></a> = <c- b>true</c->;
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed①①"><c- g>Exposed</c-></a>=<c- n>PaintWorklet</c->]
<c- b>interface</c-> <a href="#paintrenderingcontext2d"><code><c- g>PaintRenderingContext2D</c-></code></a> {
};
<a class="n" data-link-type="idl-name" href="#paintrenderingcontext2d" id="ref-for-paintrenderingcontext2d②⓪"><c- n>PaintRenderingContext2D</c-></a> <c- b>includes</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/canvas.html#canvasstate" id="ref-for-canvasstate①"><c- n>CanvasState</c-></a>;
<a class="n" data-link-type="idl-name" href="#paintrenderingcontext2d" id="ref-for-paintrenderingcontext2d①①⓪"><c- n>PaintRenderingContext2D</c-></a> <c- b>includes</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/canvas.html#canvastransform" id="ref-for-canvastransform①"><c- n>CanvasTransform</c-></a>;
<a class="n" data-link-type="idl-name" href="#paintrenderingcontext2d" id="ref-for-paintrenderingcontext2d②①"><c- n>PaintRenderingContext2D</c-></a> <c- b>includes</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/canvas.html#canvascompositing" id="ref-for-canvascompositing①"><c- n>CanvasCompositing</c-></a>;
<a class="n" data-link-type="idl-name" href="#paintrenderingcontext2d" id="ref-for-paintrenderingcontext2d③①"><c- n>PaintRenderingContext2D</c-></a> <c- b>includes</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/canvas.html#canvasimagesmoothing" id="ref-for-canvasimagesmoothing①"><c- n>CanvasImageSmoothing</c-></a>;
<a class="n" data-link-type="idl-name" href="#paintrenderingcontext2d" id="ref-for-paintrenderingcontext2d④①"><c- n>PaintRenderingContext2D</c-></a> <c- b>includes</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/canvas.html#canvasfillstrokestyles" id="ref-for-canvasfillstrokestyles①"><c- n>CanvasFillStrokeStyles</c-></a>;
<a class="n" data-link-type="idl-name" href="#paintrenderingcontext2d" id="ref-for-paintrenderingcontext2d⑤①"><c- n>PaintRenderingContext2D</c-></a> <c- b>includes</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/canvas.html#canvasshadowstyles" id="ref-for-canvasshadowstyles①"><c- n>CanvasShadowStyles</c-></a>;
<a class="n" data-link-type="idl-name" href="#paintrenderingcontext2d" id="ref-for-paintrenderingcontext2d⑥①"><c- n>PaintRenderingContext2D</c-></a> <c- b>includes</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/canvas.html#canvasrect" id="ref-for-canvasrect①"><c- n>CanvasRect</c-></a>;
<a class="n" data-link-type="idl-name" href="#paintrenderingcontext2d" id="ref-for-paintrenderingcontext2d⑦①"><c- n>PaintRenderingContext2D</c-></a> <c- b>includes</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/canvas.html#canvasdrawpath" id="ref-for-canvasdrawpath①"><c- n>CanvasDrawPath</c-></a>;
<a class="n" data-link-type="idl-name" href="#paintrenderingcontext2d" id="ref-for-paintrenderingcontext2d⑧①"><c- n>PaintRenderingContext2D</c-></a> <c- b>includes</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/canvas.html#canvasdrawimage" id="ref-for-canvasdrawimage②"><c- n>CanvasDrawImage</c-></a>;
<a class="n" data-link-type="idl-name" href="#paintrenderingcontext2d" id="ref-for-paintrenderingcontext2d⑨①"><c- n>PaintRenderingContext2D</c-></a> <c- b>includes</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/canvas.html#canvaspathdrawingstyles" id="ref-for-canvaspathdrawingstyles①"><c- n>CanvasPathDrawingStyles</c-></a>;
<a class="n" data-link-type="idl-name" href="#paintrenderingcontext2d" id="ref-for-paintrenderingcontext2d①⓪①"><c- n>PaintRenderingContext2D</c-></a> <c- b>includes</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/canvas.html#canvaspath" id="ref-for-canvaspath①"><c- n>CanvasPath</c-></a>;

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed②①"><c- g>Exposed</c-></a>=<c- n>PaintWorklet</c->]
<c- b>interface</c-> <a href="#paintsize"><code><c- g>PaintSize</c-></code></a> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double②"><c- b>double</c-></a> <a data-readonly data-type="double" href="#dom-paintsize-width"><code><c- g>width</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①①"><c- b>double</c-></a> <a data-readonly data-type="double" href="#dom-paintsize-height"><code><c- g>height</c-></code></a>;
};

</pre>
  <aside class="dfn-panel" data-for="dom-css-paintworklet">
   <b><a href="#dom-css-paintworklet">#dom-css-paintworklet</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-css-paintworklet">2. Paint Worklet</a> <a href="#ref-for-dom-css-paintworklet①">(2)</a> <a href="#ref-for-dom-css-paintworklet②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="paintworkletglobalscope">
   <b><a href="#paintworkletglobalscope">#paintworkletglobalscope</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-paintworkletglobalscope">2. Paint Worklet</a> <a href="#ref-for-paintworkletglobalscope①">(2)</a> <a href="#ref-for-paintworkletglobalscope②">(3)</a>
    <li><a href="#ref-for-paintworkletglobalscope③">3. Concepts</a>
    <li><a href="#ref-for-paintworkletglobalscope④">4. Registering Custom Paint</a> <a href="#ref-for-paintworkletglobalscope⑤">(2)</a> <a href="#ref-for-paintworkletglobalscope⑥">(3)</a>
    <li><a href="#ref-for-paintworkletglobalscope⑦">7. Drawing an image</a> <a href="#ref-for-paintworkletglobalscope⑧">(2)</a>
    <li><a href="#ref-for-paintworkletglobalscope⑨">7.1. Global Scope Selection</a> <a href="#ref-for-paintworkletglobalscope①⓪">(2)</a> <a href="#ref-for-paintworkletglobalscope①①">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-paintworkletglobalscope-devicepixelratio">
   <b><a href="#dom-paintworkletglobalscope-devicepixelratio">#dom-paintworkletglobalscope-devicepixelratio</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-paintworkletglobalscope-devicepixelratio">2. Paint Worklet</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dictdef-paintrenderingcontext2dsettings">
   <b><a href="#dictdef-paintrenderingcontext2dsettings">#dictdef-paintrenderingcontext2dsettings</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-paintrenderingcontext2dsettings">2. Paint Worklet</a> <a href="#ref-for-dictdef-paintrenderingcontext2dsettings①">(2)</a>
    <li><a href="#ref-for-dictdef-paintrenderingcontext2dsettings②">4. Registering Custom Paint</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-paintrenderingcontext2dsettings-alpha">
   <b><a href="#dom-paintrenderingcontext2dsettings-alpha">#dom-paintrenderingcontext2dsettings-alpha</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-paintrenderingcontext2dsettings-alpha">6. The 2D rendering context</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="paint-definition">
   <b><a href="#paint-definition">#paint-definition</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-paint-definition">4. Registering Custom Paint</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="paint-definition-class-constructor">
   <b><a href="#paint-definition-class-constructor">#paint-definition-class-constructor</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-paint-definition-class-constructor">4. Registering Custom Paint</a>
    <li><a href="#ref-for-paint-definition-class-constructor①">7. Drawing an image</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="paint-definition-paint-function">
   <b><a href="#paint-definition-paint-function">#paint-definition-paint-function</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-paint-definition-paint-function">4. Registering Custom Paint</a>
    <li><a href="#ref-for-paint-definition-paint-function①">7. Drawing an image</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="paint-definition-constructor-valid-flag">
   <b><a href="#paint-definition-constructor-valid-flag">#paint-definition-constructor-valid-flag</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-paint-definition-constructor-valid-flag">4. Registering Custom Paint</a>
    <li><a href="#ref-for-paint-definition-constructor-valid-flag①">7. Drawing an image</a> <a href="#ref-for-paint-definition-constructor-valid-flag②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="paint-definition-input-properties">
   <b><a href="#paint-definition-input-properties">#paint-definition-input-properties</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-paint-definition-input-properties">4. Registering Custom Paint</a>
    <li><a href="#ref-for-paint-definition-input-properties①">7. Drawing an image</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="paint-definition-paintrenderingcontext2dsettings-object">
   <b><a href="#paint-definition-paintrenderingcontext2dsettings-object">#paint-definition-paintrenderingcontext2dsettings-object</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-paint-definition-paintrenderingcontext2dsettings-object">4. Registering Custom Paint</a>
    <li><a href="#ref-for-paint-definition-paintrenderingcontext2dsettings-object①">7. Drawing an image</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="document-paint-definition">
   <b><a href="#document-paint-definition">#document-paint-definition</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-document-paint-definition">4. Registering Custom Paint</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="document-paint-definition-input-properties">
   <b><a href="#document-paint-definition-input-properties">#document-paint-definition-input-properties</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-document-paint-definition-input-properties">4. Registering Custom Paint</a> <a href="#ref-for-document-paint-definition-input-properties①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="document-paint-definition-input-argument-syntaxes">
   <b><a href="#document-paint-definition-input-argument-syntaxes">#document-paint-definition-input-argument-syntaxes</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-document-paint-definition-input-argument-syntaxes">4. Registering Custom Paint</a> <a href="#ref-for-document-paint-definition-input-argument-syntaxes①">(2)</a>
    <li><a href="#ref-for-document-paint-definition-input-argument-syntaxes②">7. Drawing an image</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="document-paint-definition-paintrenderingcontext2dsettings-object">
   <b><a href="#document-paint-definition-paintrenderingcontext2dsettings-object">#document-paint-definition-paintrenderingcontext2dsettings-object</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-document-paint-definition-paintrenderingcontext2dsettings-object">4. Registering Custom Paint</a> <a href="#ref-for-document-paint-definition-paintrenderingcontext2dsettings-object①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="document-paint-definitions">
   <b><a href="#document-paint-definitions">#document-paint-definitions</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-document-paint-definitions">4. Registering Custom Paint</a>
    <li><a href="#ref-for-document-paint-definitions①">7. Drawing an image</a> <a href="#ref-for-document-paint-definitions②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="paint-definitions">
   <b><a href="#paint-definitions">#paint-definitions</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-paint-definitions">4. Registering Custom Paint</a>
    <li><a href="#ref-for-paint-definitions①">7. Drawing an image</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="paint-class-instances">
   <b><a href="#paint-class-instances">#paint-class-instances</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-paint-class-instances">4. Registering Custom Paint</a>
    <li><a href="#ref-for-paint-class-instances①">7. Drawing an image</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-paintworkletglobalscope-registerpaint">
   <b><a href="#dom-paintworkletglobalscope-registerpaint">#dom-paintworkletglobalscope-registerpaint</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-paintworkletglobalscope-registerpaint">2. Paint Worklet</a>
    <li><a href="#ref-for-dom-paintworkletglobalscope-registerpaint①">4. Registering Custom Paint</a> <a href="#ref-for-dom-paintworkletglobalscope-registerpaint②">(2)</a>
    <li><a href="#ref-for-dom-paintworkletglobalscope-registerpaint③">5. Paint Notation</a>
    <li><a href="#ref-for-dom-paintworkletglobalscope-registerpaint④">7. Drawing an image</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="funcdef-paint">
   <b><a href="#funcdef-paint">#funcdef-paint</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-funcdef-paint">3. Concepts</a>
    <li><a href="#ref-for-funcdef-paint①">4. Registering Custom Paint</a>
    <li><a href="#ref-for-funcdef-paint②">5. Paint Notation</a> <a href="#ref-for-funcdef-paint③">(2)</a> <a href="#ref-for-funcdef-paint④">(3)</a>
    <li><a href="#ref-for-funcdef-paint⑤">7. Drawing an image</a> <a href="#ref-for-funcdef-paint⑥">(2)</a> <a href="#ref-for-funcdef-paint⑦">(3)</a> <a href="#ref-for-funcdef-paint⑧">(4)</a> <a href="#ref-for-funcdef-paint⑨">(5)</a> <a href="#ref-for-funcdef-paint①⓪">(6)</a>
    <li><a href="#ref-for-funcdef-paint①①">8.1. Example 1: Colored Circle</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="paintrenderingcontext2d">
   <b><a href="#paintrenderingcontext2d">#paintrenderingcontext2d</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-paintrenderingcontext2d">6. The 2D rendering context</a> <a href="#ref-for-paintrenderingcontext2d①">(2)</a> <a href="#ref-for-paintrenderingcontext2d②">(3)</a> <a href="#ref-for-paintrenderingcontext2d③">(4)</a> <a href="#ref-for-paintrenderingcontext2d④">(5)</a> <a href="#ref-for-paintrenderingcontext2d⑤">(6)</a> <a href="#ref-for-paintrenderingcontext2d⑥">(7)</a> <a href="#ref-for-paintrenderingcontext2d⑦">(8)</a> <a href="#ref-for-paintrenderingcontext2d⑧">(9)</a> <a href="#ref-for-paintrenderingcontext2d⑨">(10)</a> <a href="#ref-for-paintrenderingcontext2d①⓪">(11)</a> <a href="#ref-for-paintrenderingcontext2d①①">(12)</a> <a href="#ref-for-paintrenderingcontext2d①②">(13)</a> <a href="#ref-for-paintrenderingcontext2d①③">(14)</a> <a href="#ref-for-paintrenderingcontext2d①④">(15)</a> <a href="#ref-for-paintrenderingcontext2d①⑤">(16)</a> <a href="#ref-for-paintrenderingcontext2d①⑥">(17)</a> <a href="#ref-for-paintrenderingcontext2d①⑦">(18)</a> <a href="#ref-for-paintrenderingcontext2d①⑧">(19)</a>
    <li><a href="#ref-for-paintrenderingcontext2d①⑨">11. Changes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="paintrenderingcontext2d-output-bitmap">
   <b><a href="#paintrenderingcontext2d-output-bitmap">#paintrenderingcontext2d-output-bitmap</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-paintrenderingcontext2d-output-bitmap">6. The 2D rendering context</a> <a href="#ref-for-paintrenderingcontext2d-output-bitmap①">(2)</a> <a href="#ref-for-paintrenderingcontext2d-output-bitmap②">(3)</a> <a href="#ref-for-paintrenderingcontext2d-output-bitmap③">(4)</a> <a href="#ref-for-paintrenderingcontext2d-output-bitmap④">(5)</a> <a href="#ref-for-paintrenderingcontext2d-output-bitmap⑤">(6)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="paintrenderingcontext2d-alpha">
   <b><a href="#paintrenderingcontext2d-alpha">#paintrenderingcontext2d-alpha</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-paintrenderingcontext2d-alpha">6. The 2D rendering context</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="create-a-paintrenderingcontext2d-object">
   <b><a href="#create-a-paintrenderingcontext2d-object">#create-a-paintrenderingcontext2d-object</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-create-a-paintrenderingcontext2d-object">7. Drawing an image</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="paintsize">
   <b><a href="#paintsize">#paintsize</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-paintsize">4. Registering Custom Paint</a>
    <li><a href="#ref-for-paintsize①">7. Drawing an image</a> <a href="#ref-for-paintsize②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="draw-a-paint-image">
   <b><a href="#draw-a-paint-image">#draw-a-paint-image</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-draw-a-paint-image">4. Registering Custom Paint</a>
    <li><a href="#ref-for-draw-a-paint-image①">5. Paint Notation</a>
    <li><a href="#ref-for-draw-a-paint-image②">7. Drawing an image</a> <a href="#ref-for-draw-a-paint-image③">(2)</a> <a href="#ref-for-draw-a-paint-image④">(3)</a> <a href="#ref-for-draw-a-paint-image⑤">(4)</a> <a href="#ref-for-draw-a-paint-image⑥">(5)</a> <a href="#ref-for-draw-a-paint-image⑦">(6)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="invoke-a-paint-callback">
   <b><a href="#invoke-a-paint-callback">#invoke-a-paint-callback</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-invoke-a-paint-callback">7. Drawing an image</a> <a href="#ref-for-invoke-a-paint-callback①">(2)</a>
   </ul>
  </aside>
<script>/* script-var-click-highlighting */

    document.addEventListener("click", e=>{
        if(e.target.nodeName == "VAR") {
            highlightSameAlgoVars(e.target);
        }
    });
    {
        const indexCounts = new Map();
        const indexNames = new Map();
        function highlightSameAlgoVars(v) {
            // Find the algorithm container.
            let algoContainer = null;
            let searchEl = v;
            while(algoContainer == null && searchEl != document.body) {
                searchEl = searchEl.parentNode;
                if(searchEl.hasAttribute("data-algorithm")) {
                    algoContainer = searchEl;
                }
            }

            // Not highlighting document-global vars,
            // too likely to be unrelated.
            if(algoContainer == null) return;

            const algoName = algoContainer.getAttribute("data-algorithm");
            const varName = getVarName(v);
            const addClass = !v.classList.contains("selected");
            let highlightClass = null;
            if(addClass) {
                const index = chooseHighlightIndex(algoName, varName);
                indexCounts.get(algoName)[index] += 1;
                indexNames.set(algoName+"///"+varName, index);
                highlightClass = nameFromIndex(index);
            } else {
                const index = previousHighlightIndex(algoName, varName);
                indexCounts.get(algoName)[index] -= 1;
                highlightClass = nameFromIndex(index);
            }

            // Find all same-name vars, and toggle their class appropriately.
            for(const el of algoContainer.querySelectorAll("var")) {
                if(getVarName(el) == varName) {
                    el.classList.toggle("selected", addClass);
                    el.classList.toggle(highlightClass, addClass);
                }
            }
        }
        function getVarName(el) {
            return el.textContent.replace(/(\s| )+/, " ").trim();
        }
        function chooseHighlightIndex(algoName, varName) {
            let indexes = null;
            if(indexCounts.has(algoName)) {
                indexes = indexCounts.get(algoName);
            } else {
                // 7 classes right now
                indexes = [0,0,0,0,0,0,0];
                indexCounts.set(algoName, indexes);
            }

            // If the element was recently unclicked,
            // *and* that color is still unclaimed,
            // give it back the same color.
            const lastIndex = previousHighlightIndex(algoName, varName);
            if(indexes[lastIndex] === 0) return lastIndex;

            // Find the earliest index with the lowest count.
            const minCount = Math.min.apply(null, indexes);
            let index = null;
            for(var i = 0; i < indexes.length; i++) {
                if(indexes[i] == minCount) {
                    return i;
                }
            }
        }
        function previousHighlightIndex(algoName, varName) {
            return indexNames.get(algoName+"///"+varName);
        }
        function nameFromIndex(index) {
            return "selected" + index;
        }
    }
    </script>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>